Cómo ver tu estado de React y accesorios en el navegador

Si está creando una aplicación web con React, es posible que desee ver el estado o los accesorios de los componentes en tiempo real. ¡Aquí hay una solución rápida para Chrome y FireFox!

Reaccionar herramientas de desarrollo

Instale la extensión React Developer Tools para Chrome o FireFox. Le permite inspeccionar las jerarquías de componentes de React dentro de las herramientas de desarrollador, de la misma manera que miraría los elementos DOM, la consola o la red.

Inspección de componentes de React

  1. Abra su aplicación e inspeccione la página con herramientas de desarrollador (Comando + Opción + I).
  2. Seleccione React Developer Tools

3. Elija un componente en el árbol para ver su estado y accesorios actuales.

También puede seleccionar un elemento de React directamente desde la página colocando el cursor sobre él con la herramienta de selección:

Modificar el estado

Si desea actualizar su estado en el navegador, ¡puede hacerlo! Modifíquelo haciendo clic y editando los atributos de estado en la pestaña React. Esto volverá a renderizar el DOM, pasando el estado a través de los accesorios.

¡Feliz codificación! ?