Capítulo 1: Introducción y Configuración del Entorno

¡Bienvenido al curso más completo de React Native! En este primer capítulo configuraremos todo el entorno de desarrollo necesario para crear aplicaciones profesionales.

🎯 Objetivos del Capítulo

Al finalizar este capítulo serás capaz de:

• ✅ Configurar un entorno de desarrollo completo para React Native
• ✅ Crear un proyecto con Expo y TypeScript
• ✅ Configurar EAS Build para builds profesionales
• ✅ Ejecutar la aplicación en simuladores y dispositivos reales

📋 Prerrequisitos

• Conocimientos básicos de JavaScript
• Experiencia básica con React
• Node.js (recomendado v18 o superior)

🛠️ Instalación del Entorno

Paso 1: Verificar Node.js

Primero verificamos que tenemos Node.js instalado:

# Verificar versión de Node.js
node --version

# Verificar versión de npm
npm --version

Salida esperada:

v18.17.0
9.6.7

💡 Tip: Si no tienes Node.js instalado, descárgalo desde nodejs.org

Paso 2: Instalar Expo CLI y EAS CLI

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

# Instalar EAS CLI para builds profesionales
npm install -g eas-cli

# Verificar instalaciones
expo --version
eas --version

Salida esperada:

@expo/[email protected]
eas-cli/7.8.4 linux-x64 node-v18.17.0

Paso 3: Configurar Android Studio (Para Android)

1. Descargar Android Studio desde developer.android.com

2. Instalar Android SDK:

   • Abrir Android Studio
   • Tools → SDK Manager
   • Instalar Android SDK Platform 33 (API Level 33)
   • Instalar Android SDK Build-Tools 33.0.0

3. Configurar variables de entorno:

# Agregar al archivo ~/.bashrc o ~/.zshrc
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

4. Recargar configuración:

source ~/.bashrc  # o ~/.zshrc

5. Verificar configuración:

adb --version

Paso 4: Crear Emulador Android

1. Abrir AVD Manager en Android Studio
2. Create Virtual Device
3. Seleccionar dispositivo: Pixel 6 (recomendado)
4. Seleccionar imagen del sistema: API 33 (Android 13)
5. Finalizar configuración

🚀 Creación del Proyecto

Paso 1: Crear el Proyecto con Expo

# Crear nuevo proyecto con TypeScript
npx create-expo-app TodoApp --template typescript

# Navegar al directorio
cd TodoApp

Paso 2: Estructura del Proyecto

Después de crear el proyecto, tendrás esta estructura:

TodoApp/
├── app.json                 # Configuración de Expo
├── App.tsx                  # Componente principal
├── babel.config.js          # Configuración de Babel
├── package.json            # Dependencias
├── tsconfig.json           # Configuración de TypeScript
├── assets/                 # Recursos estáticos
│   ├── images/
│   └── fonts/
└── node_modules/           # Dependencias instaladas

Paso 3: Configurar app.json

Actualiza el archivo app.json con la configuración inicial:

{
  "expo": {
    "name": "Todo App",
    "slug": "todo-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "todoapp",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourname.todoapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.yourname.todoapp"
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router"
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

Paso 4: Configurar TypeScript

Actualiza tsconfig.json para una configuración más estricta:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "allowUnusedLabels": false,
    "allowUnreachableCode": false,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/screens/*": ["./src/screens/*"],
      "@/stores/*": ["./src/stores/*"],
      "@/types/*": ["./src/types/*"],
      "@/utils/*": ["./src/utils/*"]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]
}

Paso 5: Estructura de Carpetas Profesional

Crea la estructura de carpetas que usaremos durante todo el curso:

mkdir -p src/{components,screens,stores,types,utils,services,hooks}
mkdir -p src/components/{ui,forms}
mkdir -p assets/{images,fonts}

Resultado:

src/
├── components/
│   ├── ui/                 # Componentes de UI reutilizables
│   └── forms/              # Componentes de formularios
├── screens/                # Pantallas de la aplicación
├── stores/                 # Stores de Zustand
├── types/                  # Tipos de TypeScript
├── utils/                  # Funciones utilitarias
├── services/              # Servicios (API, etc.)
└── hooks/                 # Hooks personalizados

Paso 6: Configurar EAS Build

# Inicializar EAS en el proyecto
eas build:configure

Esto creará el archivo eas.json:

{
  "cli": {
    "version": ">= 7.8.4"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

🏃‍♂️ Ejecutar la Aplicación

Opción 1: Expo Go (Desarrollo Rápido)

# Iniciar el servidor de desarrollo
npx expo start

# O con opciones específicas
npx expo start --android  # Solo Android
npx expo start --ios      # Solo iOS
npx expo start --web      # Solo Web

Opción 2: Development Build (Recomendado)

# Crear development build para Android
eas build --profile development --platform android

# Instalar en dispositivo/emulador
adb install ruta/al/archivo.apk

# Iniciar con development build
npx expo start --dev-client

📱 Primer Componente

Vamos a crear nuestro primer componente para verificar que todo funciona:

src/components/ui/Welcome.tsx

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

interface WelcomeProps {
  onGetStarted: () => void;
}

export const Welcome: React.FC<WelcomeProps> = ({ onGetStarted }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>¡Bienvenido a Todo App!</Text>
      <Text style={styles.subtitle}>
        Tu aplicación de tareas profesional
      </Text>
      
      <TouchableOpacity 
        style={styles.button}
        onPress={onGetStarted}
        activeOpacity={0.8}
      >
        <Text style={styles.buttonText}>Comenzar</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 40,
    textAlign: 'center',
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 30,
    paddingVertical: 15,
    borderRadius: 8,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});

App.tsx

import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { Welcome } from './src/components/ui/Welcome';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  const [showWelcome, setShowWelcome] = useState(true);

  const handleGetStarted = () => {
    setShowWelcome(false);
  };

  if (showWelcome) {
    return (
      <>
        <Welcome onGetStarted={handleGetStarted} />
        <StatusBar style="auto" />
      </>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.text}>¡Aplicación iniciada!</Text>
      <Text style={styles.subText}>
        Próximo capítulo: TypeScript en React Native
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subText: {
    fontSize: 14,
    color: '#666',
  },
});

🧪 Verificar la Instalación

Lista de Verificación

• Node.js instalado (v18+)
• Expo CLI instalado
• EAS CLI instalado
• Android Studio configurado
• Emulador Android funcionando
• Proyecto creado con TypeScript
• Estructura de carpetas creada
• Aplicación ejecutándose correctamente

Comandos de Verificación

# Verificar versiones
node --version
npm --version
expo --version
eas --version

# Verificar Android
adb devices

# Ejecutar aplicación
npx expo start

🔧 Solución de Problemas Comunes

Error: “Android SDK not found”

# Verificar variables de entorno
echo $ANDROID_HOME
echo $PATH

# Reconfigurar si es necesario
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools

Error: “Metro bundler failed”

# Limpiar cache
npx expo start --clear

# O resetear Metro
npx react-native start --reset-cache

Error: “TypeScript compilation failed”

# Verificar configuración de TypeScript
npx tsc --noEmit

# Instalar tipos faltantes
npm install --save-dev @types/react @types/react-native

📚 Recursos Adicionales

• Documentación de Expo
• Guía de React Native
• Configuración de Android Studio
• EAS Build Documentation

✅ Resumen del Capítulo

En este capítulo hemos:

1. Configurado el entorno completo para desarrollo React Native
2. Instalado todas las herramientas necesarias (Expo CLI, EAS CLI, Android Studio)
3. Creado nuestro primer proyecto con TypeScript
4. Configurado la estructura de carpetas profesional
5. Creado nuestro primer componente funcional
6. Verificado que todo funciona correctamente

🎯 Siguiente Capítulo

En el Capítulo 2: TypeScript en React Native, aprenderemos:

• Configuración avanzada de TypeScript
• Tipos para componentes y props
• Interfaces para datos de la aplicación
• Tipado de navegación y rutas

¡Continúa con el siguiente capítulo para dominar TypeScript en React Native! 🚀