React Developer Tools: ¿Cómo analizar el comportamiento y estado de nuestros componentes en React.js?

¿Qué aprenderás?

• Aprovecharemos este apartado para que aprendas a instalar Google Chrome en Ubuntu (Install Chrome Ubuntu).
• Instala la herramienta tanto en Chrome como en FireFox.
• Analizaremos la sección de "Component" y "Profiler".
• En la sección de Component veremos como analizar las propiedades y el state de tus componentes mientras desarrollas.

¿Qué es React Developer Tools?

React Developer Tools es una extensión que puedes instalar en FireFox, Chrome y el navegador Edge, esta extensión nos permite visualizar como se comportan nuestros componentes mientras escribimos código.

¿Para qué sirve React Developer Tools?

Con esta herramienta podemos visualizar, principalmente, la información de cada componente que conforman nuestro proyecto, por ejemplo:

• Podemos visualizar las propiedades (props) de un componente con tan solo seleccionarlo.
• De la misma forma, podremos conocer los valores y los cambios que tenga el state de cada componente.
• Conoceremos que componente renderea a quien.
• Y El archivo fuente donde se invoca dicho componente.

Y muchas opciones más, como por ejemplo, ver rápidamente la salida HTML del componente e incluso visualizar el código fuente directamente en el navegador.

Excelente, ahora que ya sabes ¿Qué es y para qué sirve? Procedamos a instalarla en los navegadores, Chrome y FireFox.

¿Cómo instalar Chrome en Ubuntu?

En el vídeo puedes ver claramente los pasos para la instalación de este navegador en el sistema operativo Ubuntu. no obstante te dejo los comandos para que lo puedas hacer rápidamente.

1. Descarga la ultima versión de Google Chrome, esto lo puedes hacer ingresando a la pagina oficial de Chrome o con el siguiente comando.

wget -c https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

1. Bien, ya sea, que descargaste el .deb desde la página o a través del comando, ahora debes actualizar con el siguiente comando.

sudo apt-get update

1. Ahora, para tener acceso al icono de Chrome desde nuestro lanzador, debemos instalar la librería de indicadores.

sudo apt-get install libappindicator1

1. Ahora para finalizar solo debes posicionarte en la carpeta donde esta el .deb que descargaste, en mi caso esta en la carpeta de "Descargas", y corres el siguiente comando.

sudo dpkg -i google-chrome-stable_current_amd64.deb

Excelente, en este punto ya debes tener instalado Chrome y puedes proceder a instalar las herramientas de React. Recuerda que si tienes dudas puedes mirar el vídeo donde hacemos esta instalación poso a poso.

Instalación de React Developer Tools

Bien para instalar la herramienta de desarrollo de React, solo debes ir a la página de la documentación oficial y encontrarás los enlaces que te llevan directo a la pantalla de la instalación de la extensión, en resumen:

1. Documentación oficial de RDT
2. En dicha página encontrarás los enlaces directos para la instalación de la extensión.

1. Ahora, por ejemplo, supongamos que queremos realizar la instalación en Chrome, entonces solo debemos dar clic donde dice "Chrome Web Store".

1. Ahora solo da clic en Añadir y listo, ya tienes tu herramienta en Chrome.
2. Seguramente después de añadir la extensión tendrás que cerrar el navegador para que carguen las nuevas pestañas.
3. Una vez en tu aplicación presiona F12 y verás algo como lo siguiente, con las nuevas pestañas.

Y listo, con esto ya puedes utilizar esta gran herramientas en tu ambiente de desarrollo y acelerar la escritura de código ya que podrás observar como van cambiando el State y las propiedades de tus componentes.

Recuerda que en el vídeo puedes ver esta herramienta en acción y revisamos las secciones más importantes.

Excelente, espero que este post y vídeo te sea de gran utilidad, no olvides en suscribirte a mi canal y compartir para apoyar este curso y poder seguir subiendo más vídeos, nos vemos en el próximo post.