← Volver al listado de tecnologías

Capítulo 2: Instalación

Por: Siempre Listo
reactotroninstalacionreactreact-native

Instalación

Configuraremos Reactotron en tu proyecto React o React Native.

Reactotron Desktop

Descarga desde Releases de GitHub:

React Native

npm install reactotron-react-native

React Web

npm install reactotron-react-js

Configuración React Native

// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const reactotron = Reactotron
  .setAsyncStorageHandler(AsyncStorage)
  .configure({
    name: 'Mi App',
  })
  .useReactNative({
    asyncStorage: true,
    networking: true,
    editor: true,
    errors: true,
    overlay: true,
  })
  .connect();

export default reactotron;

Configuración React Web

// ReactotronConfig.ts
import Reactotron from 'reactotron-react-js';

const reactotron = Reactotron
  .configure({
    name: 'Mi App Web',
  })
  .connect();

export default reactotron;

Importar en Entry Point

// index.js o App.tsx
if (__DEV__) {
  require('./ReactotronConfig');
}

Ejercicio Práctico

Objetivo

Instalar y configurar Reactotron en un proyecto existente.

Pasos

  1. Instala el paquete correspondiente
  2. Crea ReactotronConfig.ts
  3. Importa en el entry point
  4. Verifica conexión en Reactotron Desktop
Ver solución React Native 
npm install reactotron-react-native
// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';

Reactotron
  .configure({ name: 'Mi App RN' })
  .useReactNative()
  .connect();

// index.js
if (__DEV__) {
  require('./ReactotronConfig');
}

Criterios de Éxito

← Volver al listado de tecnologías