¿Qué es React Developper Tools?

Autor: | Última modificación: 30 de agosto de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿Has escuchado hablar de React Developper 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 Developper Tools, una extensión de navegador ideal para proyectos desarrollados con React.

¿Qué es React Developper 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 Developper 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 Developper 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 Developper Tools deberás abrir el inspector de tu navegador y explorar para encontrar components y profiler, las dos pestañas que te instalará React Developper 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 Developper 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!