Introducción a Reactotron

Reactotron es una aplicación de escritorio para inspeccionar aplicaciones React y React Native.

¿Qué es Reactotron?

Reactotron es una herramienta de debugging que se conecta a tu app y proporciona:

• Timeline de eventos en tiempo real
• Inspección y modificación de estado
• Tracking de peticiones de red
• Logs avanzados con contexto
• Comandos remotos personalizados

Características Principales

Timeline

Visualiza todas las acciones, logs y eventos en una línea de tiempo cronológica.

State Management

Inspecciona Redux, MobX, Zustand y otros state managers.

Network

Monitorea todas las peticiones HTTP con headers, body y timing.

Benchmarking

Mide el tiempo de ejecución de operaciones.

Custom Commands

Ejecuta funciones en tu app desde Reactotron.

Comparativa

Característica	Reactotron	Chrome DevTools	Flipper
Timeline visual	Excelente	Básico	Bueno
Redux integration	Nativo	Extension	Plugin
React Native	Completo	Limitado	Completo
Custom commands	Sí	No	Plugin
Setup	Simple	Ninguno	Complejo

Arquitectura

flowchart LR
    subgraph App["Tu App (React/RN)"]
        Plugins["Plugins<br/>Redux | Saga | Network"]
    end

    subgraph Desktop["Reactotron (Desktop)"]
        UI["Interfaz de Debugging"]
    end

    App <-->|WebSocket| Desktop

Ejercicio Práctico

Objetivo

Descargar e instalar Reactotron Desktop.

Pasos

1. Visita github.com/infinitered/reactotron
2. Descarga la versión para tu SO
3. Instala la aplicación
4. Abre Reactotron y familiarízate con la interfaz

Criterios de Éxito

• Reactotron instalado
• Aplicación abierta
• Interfaz explorada

---

Navegación

• ← Volver al Índice
• Siguiente: Instalación →