Skip to content

Translated New React DevTools blog entry #297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 6, 2019
Merged

Translated New React DevTools blog entry #297

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 34 additions & 34 deletions content/blog/2019-08-15-new-react-devtools.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<div>`, React Native `<View>`) 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 `<div>`, React Native `<View>`) 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).