12. Configuracion del entorno de desarrollo en Windows

 

Tutorial: Configuración del Entorno de Desarrollo en Windows para React Native

En este tutorial guiaremos paso a paso la configuración completa del entorno de desarrollo para React Native en Windows, enfocándonos específicamente en desarrollo para Android.

🎯 Objetivo del Tutorial

Configurar Windows para desarrollar aplicaciones React Native con Android Studio, incluyendo todas las herramientas necesarias.

⚠️ Limitaciones en Windows

  • Solo desarrollo Android: Windows no soporta desarrollo iOS (requiere macOS)

  • Emuladores Android: Podrás usar emuladores de Android Studio

  • Dispositivos físicos: Puedes conectar dispositivos Android reales

📋 Lista de Herramientas a Instalar

  1. Node.js (con gestor de versiones NVM)

  2. Android Studio (con SDK de Android)

  3. Java Development Kit (JDK)

  4. Visual Studio Code (editor de código)

  5. Extensiones de VS Code (para React Native)

🛠️ Paso 1: Instalar Node.js con NVM para Windows

¿Por qué NVM?

  • Permite cambiar entre versiones de Node.js fácilmente

  • Evita conflictos entre proyectos

  • Facilita actualizaciones

Proceso de Instalación:

  1. Descargar NVM para Windows:

  2. Ejecutar el Instalador:

  3. powershell

# Acepta términos y condiciones

# Usa la ruta de instalación sugerida: C:\Users\TuUsuario\AppData\Roaming\nvm

  1. # Sigue el asistente de instalación

  2. Verificar Instalación:

  3. cmd

nvm --version

  1. # Debería mostrar la versión de NVM instalada

  2. Instalar Node.js 18 (LTS - Long Term Support):

  3. cmd

nvm install 18

# Descarga e instala Node.js 18.x.x


nvm use 18

  1. # Selecciona esta versión para usar

  2. Verificar Node.js y npm:

  3. cmd

node --version

# Debería mostrar: v18.x.x


npm --version

  1. # Debería mostrar: 9.x.x o superior

🛠️ Paso 2: Instalar Android Studio

Descarga e Instalación:

  1. Descargar Android Studio:

  2. Ejecutar el Instalador:

  3. powershell

# Sigue estos pasos en el instalador:

# 1. Next en la pantalla de bienvenida

# 2. Marca "Android Studio" y "Android Virtual Device"

# 3. Usa la ruta por defecto: C:\Program Files\Android\Android Studio

# 4. Next y luego Install

  1. # 5. Marca "Start Android Studio" al finalizar

  2. Configuración Inicial de Android Studio:

  3. powershell

# Al abrir por primera vez:

# 1. Selecciona "Do not import settings" (si es primera vez)

# 2. Elige tema oscuro o claro (recomendado: Dark)

# 3. En "Install Type" selecciona "Standard"

# 4. Acepta todas las licencias

  1. # 5. Haz clic en "Finish"

  2. Configurar SDK Manager:

  3. powershell

# En Android Studio:

# 1. Ve a "More Actions" → "SDK Manager"

# 2. Pestaña "SDK Platforms":

#    - ✅ Android 13.0 (Tiramisu) - API Level 33

#    - ✅ Android 12.0 (S) - API Level 31

# 3. Pestaña "SDK Tools":

#    - ✅ Android SDK Build-Tools 33

#    - ✅ Android Emulator

#    - ✅ Android SDK Platform-Tools

#    - ✅ Intel x86 Emulator Accelerator (HAXM)

  1. # 4. Aplica cambios y espera la instalación

🛠️ Paso 3: Configurar Variables de Entorno

Encontrar la Ruta del SDK:

  1. En Android Studio, ve a: File → Settings → Appearance & Behavior → System Settings → Android SDK

  2. Copia la ruta del "Android SDK Location"

    • Normalmente: C:\Users\TuUsuario\AppData\Local\Android\Sdk

Configurar Variables en Windows:

  1. Abrir Configuración de Variables:

  2. powershell

# Método 1: Buscar en Windows

# Escribe "variables de entorno" en la búsqueda

# Selecciona "Editar las variables de entorno del sistema"


# Método 2: Panel de control

# Panel de Control → Sistema → Configuración avanzada del sistema

  1. # → Variables de entorno

  2. Crear Variable ANDROID_HOME:

  3. powershell

# En "Variables del sistema" → "Nueva..."

# Nombre: ANDROID_HOME

  1. # Valor: C:\Users\TuUsuario\AppData\Local\Android\Sdk

  2. Agregar al PATH:

  3. powershell

# En "Variables del sistema" → Selecciona "Path" → "Editar"

# Agrega estas tres rutas (NUEVAS líneas):


1. %ANDROID_HOME%\platform-tools

2. %ANDROID_HOME%\emulator

3. %ANDROID_HOME%\tools


  1. # Usa %ANDROID_HOME% para referencia relativa

  2. Configurar JAVA_HOME:

  3. powershell

# Ruta del JDK incluido en Android Studio:

# C:\Program Files\Android\Android Studio\jbr


# Crear variable JAVA_HOME:

# Nombre: JAVA_HOME

# Valor: C:\Program Files\Android\Android Studio\jbr


# Agregar al PATH:

  1. # %JAVA_HOME%\bin

  2. Verificar Configuración:

  3. cmd

# Abre NUEVA ventana de CMD

adb --version

# Debería mostrar versión de Android Debug Bridge


java --version

  1. # Debería mostrar Java 17.x.x

🛠️ Paso 4: Crear Emulador Android

Configurar Dispositivo Virtual:

  1. Abrir AVD Manager:

  2. powershell

# En Android Studio:

# Tools → AVD Manager

  1. # O en pantalla principal: "More Actions" → "Virtual Device Manager"

  2. Crear Nuevo Dispositivo:

  3. powershell

# 1. Haz clic en "Create Virtual Device"

# 2. Selecciona categoría "Phone"

# 3. Elige "Pixel 5" (recomendado)

  1. # 4. Haz clic en "Next"

  2. Descargar Imagen del Sistema:

  3. powershell

# 1. Selecciona "Tiramisu" (Android 13.0)

# 2. API Level 33

# 3. Marca "Google Play" (importante para servicios de Google)

# 4. Haz clic en "Download"

  1. # 5. Espera la descarga (aproximadamente 2GB)

  2. Configurar Dispositivo:

  3. powershell

# 1. Asigna nombre: "Pixel_5_API_33"

# 2. Orientation: Portrait (vertical)

# 3. Deja opciones gráficas por defecto

  1. # 4. Haz clic en "Finish"

  2. Probar Emulador:

  3. powershell

# En AVD Manager, haz clic en "Play" (triángulo verde)

# Espera 2-5 minutos para que inicie

  1. # Deberías ver la pantalla de inicio de Android

🛠️ Paso 5: Instalar Visual Studio Code

Instalación:

  1. Descargar VS Code:

  2. Ejecutar Instalador:

  3. powershell

# 1. Acepta términos y condiciones

# 2. Usa ruta por defecto

# 3. MARCA estas opciones durante instalación:

#    - ✅ "Add to PATH"

#    - ✅ "Register as editor for supported file types"

#    - ✅ "Add to context menu"

  1. # 4. Sigue el asistente y finaliza

Extensiones Esenciales para React Native:

  1. Abrir Extensiones en VS Code:

  2. powershell

# Icono de extensiones en barra lateral izquierda

  1. # O Ctrl+Shift+X

  2. Instalar Extensiones:

  3. powershell

# Busca e instala estas extensiones:


1. React Native Tools (Microsoft)

   - Soporte completo para React Native


2. ES7+ React/Redux/React-Native snippets

   - Atajos de código para componentes


3. ESLint

   - Análisis de código y mejores prácticas


4. Prettier - Code formatter

   - Formateo automático de código


5. Material Icon Theme (opcional)

  1.    - Iconos bonitos para archivos

  2. Configurar ESLint y Prettier:

  3. json

// En VS Code, crea archivo .vscode/settings.json en tu proyecto:

{

  "editor.formatOnSave": true,

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "eslint.enable": true,

  "files.autoSave": "onFocusChange"

  1. }

🛠️ Paso 6: Verificar Instalación Completa

Comando de Verificación:

cmd

# Abre CMD o PowerShell como Administrador

npx react-native doctor

Resultado Esperado:

text

Common

 ✓ Node.js

 ✓ npm

 ✓ Watchman (recomendado pero no obligatorio)


Android

 ✓ JDK

 ✓ Android Studio

 ✓ Android SDK

 ✓ Android Emulator


iOS

 ✗ Xcode (solo macOS)

 ✗ CocoaPods (solo macOS)

 ✗ iOS Simulator (solo macOS)

Si Hay Errores:

cmd

# Corregir automáticamente

npx react-native doctor --fix


# Verificar manualmente

adb devices

# Debería listar emuladores/dispositivos


java -version

# Java 17.x.x


node --version

# Node 18.x.x

🚀 Paso 7: Crear y Probar Primer Proyecto

Crear Proyecto de Prueba:

cmd

# Navegar a carpeta de proyectos

cd C:\Users\TuUsuario\Documents


# Crear nuevo proyecto React Native

npx react-native@latest init MiPrimeraApp


# Entrar al proyecto

cd MiPrimeraApp

Ejecutar en Emulador:

cmd

# Terminal 1 - Iniciar servidor Metro

npx react-native start


# Terminal 2 - Ejecutar en Android

npx react-native run-android


# Si el emulador no está abierto, se abrirá automáticamente

Probar en Dispositivo Físico:

cmd

# 1. Activar "Modo desarrollador" en tu Android

# 2. Activar "Depuración USB"

# 3. Conectar por USB

# 4. Ejecutar:

adb devices

# Debería listar tu dispositivo


# 5. Ejecutar app

npx react-native run-android

🛠️ Paso 8: Solución de Problemas Comunes

Problema: 'adb' no reconocido

cmd

# Verificar ANDROID_HOME

echo %ANDROID_HOME%


# Si no muestra nada, reiniciar Windows

# O ejecutar en nueva terminal

Problema: Puerto 8081 ocupado

cmd

# Encontrar proceso usando puerto 8081

netstat -ano | findstr :8081


# Terminar proceso (reemplazar PID)

taskkill /PID [NUMERO_PID] /F


# Alternativa: cambiar puerto Metro

npx react-native start --port 8088

Problema: Emulador lento

cmd

# En AVD Manager:

# 1. Editar dispositivo

# 2. Cambiar "Graphics" a "Software"

# 3. Aumentar RAM a 2048MB

# 4. Habilitar "Use Host GPU"

Problema: Licencias no aceptadas

cmd

# Aceptar licencias de Android SDK

cd %ANDROID_HOME%\tools\bin

sdkmanager --licenses

# Presionar 'y' para todas

📝 Checklist de Verificación Final

  • Node.js 18.x.x instalado con NVM

  • npm 9.x.x o superior

  • Android Studio instalado

  • SDK Android 13 y 12 instalados

  • Variables ANDROID_HOME y JAVA_HOME configuradas

  • ADB funcionando en terminal

  • Emulador Pixel 5 creado y funcionando

  • Visual Studio Code instalado

  • Extensiones React Native instaladas

  • Proyecto de prueba creado exitosamente

🎉 ¡Configuración Completa!

Has configurado exitosamente:

✅ Node.js y NVM - Para gestión de paquetes y versiones
✅ Android Studio - Entorno de desarrollo Android
✅ SDK y Emulador - Para pruebas locales
✅ Variables de entorno - Para acceso desde terminal
✅ Visual Studio Code - Editor optimizado para React Native

📚 Recursos Adicionales

¡Felicidades! Tu entorno de desarrollo en Windows está listo. Ahora puedes comenzar a desarrollar aplicaciones React Native para Android. Recuerda que para desarrollo iOS necesitarás una Mac

Comentarios

Publicar un comentario

Entradas más populares de este blog

Guía Paso a Paso para Entender React Native (antes del Tutorial)

  1. 📱 ¿Qué es React Native? React Native es un  framework para crear aplicaciones móviles nativas  usando  JavaScript y React . A diferencia de las apps web, genera componentes nativos reales (no WebViews). Comparación con React Web: React Web React Native <div> <View> <span> ,  <p> <Text> <input> <TextInput> onClick onPress CSS StyleSheet (JavaScript) 2. 🎯 Prerrequisitos Básicos A) Conocimientos previos necesarios: ✅ JavaScript ES6+ (funciones flecha, destructuración, spread operator) ✅ Conceptos básicos de React (si ya sabes React web, ¡estás al 90%!) Componentes Props (propiedades) ✅ Hooks (useState, useEffect) B) Si NO sabes React, necesitas esto primero: javascript // 1. Componente funcional function MiComponente ( ) { return < View > Hola Mundo < / View > ; } // 2. Props (propiedades que recibe un componente) function Saludo ( props ) { return < Text > Hola { props . nombre } ...
Leer más

Tutorial: Aplicación React Native para Agregar Tareas - Minimalista

  Voy a crear una aplicación React Native simple que permite agregar tareas a una lista usando un formulario con un solo input. Será minimalista y bien explicado paso a paso. Estructura del Proyecto text react-native-todo-app/ ├── src/ │ ├── components/ │ │ ├── TaskForm.js │ │ └── TaskList.js │ └── App.js ├── package.json └── README.md Paso a Paso 1. Crear el proyecto React Native bash npx react-native init ReactNativeTodoApp cd ReactNativeTodoApp 2. Crear el componente App.js jsx import React , { useState } from 'react' ; import { View , Text , StyleSheet , SafeAreaView } from 'react-native' ; import TaskForm from './src/components/TaskForm' ; import TaskList from './src/components/TaskList' ; function App ( ) { // Estado para almacenar la lista de tareas const [ tasks , setTasks ] = useState ( [ ] ) ; // Función para agregar una nueva tarea const addTask = ( taskText ) => { // Crear un o...
Leer más

5. Vista Rapida: Estructura Projecto Base

  Tutorial: Reproducir la Estructura de un Proyecto Base de React Native En este tutorial aprenderás a crear y entender la estructura básica de un proyecto en React Native, utilizando la imagen adjunta como referencia y los conceptos proporcionados. 🎯 Objetivo del Tutorial Reproducir la estructura básica de un proyecto React Native y comprender la función de cada carpeta y archivo esencial. 📁 Estructura de Carpetas y Archivos (Basada en la Imagen) text tu-proyecto/ │ ├── .bundle/ ├── .yscode/ ├── android/          # Código nativo para Android ├── ios/              # Código nativo para iOS ├── node_modules/     # Dependencias externas instaladas ├── src/              # Código fuente principal de la app ├── vendor/ │ ├── .eslintrc.js      # Configuración de ESLint ├── .gitignore        # Archivos a ignorar por Git ├── .node-version   ...
Leer más