← Volver al listado de tecnologías

Capítulo 3: Primeros Pasos

Por: Siempre Listo
rozenitedevtoolsinterfazprimeros-pasos

Primeros Pasos

Aprenderás a activar y explorar la interfaz de Rozenite DevTools.

Abrir DevTools

En Expo

  1. Ejecuta npx expo start
  2. Presiona j para abrir DevTools
  3. Los paneles de Rozenite aparecen automáticamente

En React Native CLI

  1. Ejecuta npx react-native start
  2. Shake del dispositivo o Cmd+D (iOS) / Cmd+M (Android)
  3. Selecciona “Open DevTools”

Interfaz de Rozenite

┌─────────────────────────────────┐
│ DevTools                    [X] │
├─────────────────────────────────┤
│ [Network] [Storage] [Perf]      │
├─────────────────────────────────┤
│                                 │
│   Contenido del panel activo    │
│                                 │
└─────────────────────────────────┘

Cada plugin registrado aparece como una pestaña:

Configuración de DevTools

<RozeniteProvider
  config={{
    enabled: __DEV__, // Solo en desarrollo
    defaultPanel: 'network', // Panel inicial
    position: 'bottom', // Posición del overlay
  }}
>

Ejercicio Práctico

Objetivo

Explorar la interfaz de Rozenite con plugins básicos.

Pasos

  1. Instala los plugins Network y Storage
  2. Configura ambos en el Provider
  3. Abre DevTools y navega entre paneles
  4. Realiza una petición HTTP y observa en Network
Ver solución 
import { RozeniteProvider } from '@rozenite/core';
import { NetworkPlugin } from '@rozenite/network';
import { StoragePlugin } from '@rozenite/storage';

export default function App() {
  return (
    <RozeniteProvider plugins={[NetworkPlugin, StoragePlugin]}>
      <MyApp />
    </RozeniteProvider>
  );
}

// En algún componente
function MyApp() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1');
  }, []);

  return <Text>Mi App</Text>;
}

Criterios de Éxito

← Volver al listado de tecnologías