¿Has escuchado hablar de React Developer Tools? El mundo de la programación web está en constante crecimiento. Ya no solo tenemos diversos lenguajes de programación que nos permiten ejecutar todo tipo de acciones, sino también herramientas que nos facilitan este proceso. Por eso, aquí te enseñaremos qué es y cómo funciona React Developer Tools, una extensión de navegador ideal para proyectos desarrollados con React.
¿Qué es React Developer Tools?
En nuestros posts sobre qué es una SPA en programación y sobre el código de una aplicación creada con create-react-app, te hemos explicado cómo inspeccionar tu código desde el navegador puede ser una estrategia útil para entender su funcionamiento. Este proceso también nos permite entender la traducción que sucede entre el código que escribimos y el que procesa el servidor. Sin embargo, el inspector de nuestro navegador simplemente nos muestra el código resultado de nuestro proyecto. Es decir, con el inspector tenemos acceso al HTML resultante, pero a veces necesitamos ver más que esto.
React Developer Tools es una extensión que nos permite ver desde el navegador la estructura y jerarquía de nuestros componentes React. Esto nos permite relacionar los elementos que vemos en nuestra página web con el trozo de código que hemos escrito. Para instalar esta extensión, puedes buscarla en el navegador de tu preferencia. En nuestro caso, hemos buscado React Developer Tools en Google Chrome, pero también existe para Firefox.
Ten en cuenta que, una vez instales esta extensión, tal vez debas resetear tu navegador para que funcione.
Ahora, para acceder a React Developer Tools deberás abrir el inspector de tu navegador y explorar para encontrar components y profiler, las dos pestañas que te instalará React Developer Tools. Cuando entres a components, verás la estructura de componentes de tu aplicación. Si tu aplicación se ha creado con create-react-app, esta estructura se verá como App – div.
Como recomendación, cada vez que estés desarrollando con React, ten esta pestaña abierta en tu navegador, pues será muy útil para entender tu proyecto.
¿Qué sigue?
Ahora que sabes qué es y cómo funciona la herramienta React Developer Tools, ¡es el momento de emplearla en tus proyectos! Para conocer más sobre cómo desarrollar un proyecto de programación, no solo en React, sino también en JavaScript, CSS y HTML, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar estas y muchas otras herramientas de programación para la web. ¡No te lo pierdas!
