Configuracion del Entorno y Estructura del Proyecto

Opciones de Configuracion

Hay dos formas principales de comenzar un proyecto React Native: Expo (recomendado para principiantes) y React Native CLI (para mas control).

Expo vs React Native CLI

Comenzando con Expo

# Instalar Expo CLI globalmente
npm install -g expo-cli

# Crear nuevo proyecto
npx create-expo-app MiApp
cd MiApp

# Iniciar servidor de desarrollo
npx expo start

# Escanea el codigo QR con la app Expo Go en tu telefono
# O presiona 'i' para iOS simulator, 'a' para Android emulator

Comenzando con React Native CLI

# Requiere: Node, Watchman, Xcode (Mac), Android Studio

# Crear nuevo proyecto
npx react-native@latest init MiApp
cd MiApp

# Ejecutar en iOS (solo Mac)
npx react-native run-ios

# Ejecutar en Android
npx react-native run-android

Estructura del Proyecto

MiApp/
├── App.js              # Componente raiz de la app
├── app.json            # Configuracion de la app
├── package.json        # Dependencias
├── babel.config.js     # Configuracion de Babel
├── metro.config.js     # Configuracion del bundler Metro
├── src/                # Tu codigo fuente
│   ├── components/     # Componentes reutilizables
│   ├── screens/        # Componentes de pantalla/pagina
│   ├── navigation/     # Configuracion de navegacion
│   ├── hooks/          # Hooks personalizados
│   ├── services/       # Llamadas a API, etc.
│   ├── utils/          # Funciones de utilidad
│   └── constants/      # Constantes de la app
├── assets/             # Imagenes, fuentes, etc.
├── ios/                # Codigo nativo iOS (solo CLI)
└── android/            # Codigo nativo Android (solo CLI)

Configuracion de app.json

{
  "expo": {
    "name": "Mi App",
    "slug": "mi-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "bundleIdentifier": "com.miempresa.miapp",
      "supportsTablet": true
    },
    "android": {
      "package": "com.miempresa.miapp",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}