7. Entorno de desarrollo requerido.

 

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

En este tutorial aprenderás a configurar correctamente todo el entorno necesario para desarrollar aplicaciones con React Native en tu sistema operativo.

🎯 Objetivo del Tutorial

Instalar y configurar todas las herramientas esenciales para comenzar a desarrollar aplicaciones React Native tanto para iOS como para Android.

📋 Requisitos Previos

Antes de comenzar, necesitarás:

  • Computadora con Windows, macOS o Linux

  • Conocimientos básicos de línea de comandos

  • Espacio en disco suficiente (recomendado 10GB mínimo)

  • Conexión a Internet para descargar los paquetes

🛠️ Paso 1: Instalar Node.js y npm

¿Por qué necesitas Node.js?

  • Ejecutar JavaScript en el servidor/local

  • Gestionar dependencias con npm/yarn

  • Ejecutar scripts de construcción

Instalación:

Windows/macOS/Linux:

  1. Descarga Node.js desde nodejs.org

  2. Elige la versión LTS (Long Term Support) - Recomendado

  3. Ejecuta el instalador y sigue las instrucciones

Verificar instalación:

bash

node --version

# Debería mostrar: v18.x.x o superior


npm --version

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

Alternativa: Gestor de versiones (Recomendado)

Para evitar conflictos de versiones entre proyectos:

Windows:

bash

# Instalar nvm-windows

# Descarga desde: https://github.com/coreybutler/nvm-windows

nvm install 18

nvm use 18

macOS/Linux:

bash

# Instalar nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash


# Reiniciar terminal

nvm install 18

nvm use 18

🛠️ Paso 2: Instalar Java Development Kit (JDK) - Solo Android

Requisito: JDK 11 o superior

Windows/macOS:

  1. Descarga desde Adoptium

  2. Instala JDK 11 o 17

  3. Configura variable de entorno JAVA_HOME

Verificar instalación:

bash

java --version

# Debería mostrar versión 11 o superior

Configurar JAVA_HOME:

Windows:

cmd

setx JAVA_HOME "C:\Program Files\Java\jdk-17"

macOS/Linux:

bash

# Agregar al ~/.bashrc, ~/.zshrc o ~/.profile

export JAVA_HOME=/usr/lib/jvm/java-17-openjdk

export PATH=$JAVA_HOME/bin:$PATH

🛠️ Paso 3: Configurar Entorno Android

Instalar Android Studio:

  1. Descarga desde developer.android.com/studio

  2. Instala con configuración estándar

  3. Abre Android Studio después de instalar

Configurar SDK y herramientas:

  1. En Android Studio, ve a Tools → SDK Manager

  2. En la pestaña SDK Platforms:

    • ✅ Android 13.0 (Tiramisu) - API Level 33

    • ✅ Android 12.0 (S) - API Level 31

  3. En la pestaña SDK Tools:

    • ✅ Android SDK Build-Tools (33)

    • ✅ Android Emulator

    • ✅ Android SDK Platform-Tools

    • ✅ Intel x86 Emulator Accelerator (HAXM) (solo Windows/Intel Mac)

Configurar Variables de Entorno:

Windows:

cmd

# Variables de usuario

ANDROID_HOME = C:\Users\TuUsuario\AppData\Local\Android\Sdk


# Agregar al PATH

C:\Users\TuUsuario\AppData\Local\Android\Sdk\platform-tools

C:\Users\TuUsuario\AppData\Local\Android\Sdk\emulator

C:\Users\TuUsuario\AppData\Local\Android\Sdk\tools\bin

macOS/Linux:

bash

# Agregar al ~/.bashrc, ~/.zshrc o ~/.profile

export ANDROID_HOME=$HOME/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/emulator

export PATH=$PATH:$ANDROID_HOME/platform-tools

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin

Verificar instalación Android:

bash

adb --version

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


emulator -list-avds

# Listará los emuladores disponibles

🛠️ Paso 4: Configurar Entorno iOS (Solo macOS)

Requisitos:

  • macOS 10.15 o superior

  • Xcode 12 o superior

  • Command Line Tools

Instalar Xcode:

  1. Abre App Store

  2. Busca "Xcode"

  3. Instala (aproximadamente 20GB)

  4. Abre Xcode después de instalar

  5. Acepta los términos de licencia

Instalar Command Line Tools:

bash

xcode-select --install

Configurar Xcode:

  1. Abre Xcode

  2. Preferences → Locations

  3. Selecciona la versión de Command Line Tools

Verificar instalación iOS:

bash

xcodebuild -version

# Debería mostrar versión de Xcode


ios-deploy --version

# Verifica si está instalado

🛠️ Paso 5: Instalar React Native CLI

Instalación global:

bash

npm install -g react-native-cli

Alternativa moderna (Recomendada):

React Native ahora recomienda usar npx en lugar de instalar globalmente:

bash

# No necesitas instalar globalmente

# Solo usa npx para crear proyectos

npx react-native@latest init MiProyecto

Verificar instalación:

bash

react-native --version

# O usando npx

npx react-native --version

🛠️ Paso 6: Instalar Yarn (Opcional pero Recomendado)

¿Por qué Yarn?

  • Más rápido que npm

  • Mejor manejo de dependencias

  • Lock file más confiable

Instalación:

bash

npm install -g yarn

Verificar:

bash

yarn --version

🛠️ Paso 7: Configurar Emuladores

Android Emulator:

  1. Abre Android Studio

  2. Tools → AVD Manager

  3. Create Virtual Device

  4. Selecciona dispositivo (Pixel 5 recomendado)

  5. Selecciona imagen del sistema (Android 13 - API 33)

  6. Configura nombre y características

iOS Simulator:

  1. Abre Xcode

  2. Xcode → Open Developer Tool → Simulator

  3. Hardware → Device

  4. Selecciona dispositivo (iPhone 14 recomendado)

🛠️ Paso 8: Verificar Instalación Completa

Comando de verificación:

bash

npx react-native doctor

Salida esperada:

text

Common

 ✓ Node.js

 ✓ npm

 ✓ Watchman (recomendado)

 

Android

 ✓ JDK

 ✓ Android Studio

 ✓ Android SDK

 ✓ Android Emulator

 

iOS

 ✓ Xcode

 ✓ CocoaPods (si es necesario)

 ✓ iOS Simulator

Si hay errores:

bash

# Corregir problemas automáticamente

npx react-native doctor --fix

🛠️ Paso 9: Crear Primer Proyecto de Prueba

Crear proyecto:

bash

npx react-native@latest init MiPrimeraApp

cd MiPrimeraApp

Ejecutar en Android:

bash

# Terminal 1: Servidor Metro

npx react-native start


# Terminal 2: Ejecutar en emulador

npx react-native run-android

Ejecutar en iOS:

bash

# Terminal 1: Servidor Metro

npx react-native start


# Terminal 2: Ejecutar en simulador

npx react-native run-ios

🛠️ Paso 10: Solución de Problemas Comunes

Problema: Android SDK no encontrado

bash

# Verificar ANDROID_HOME

echo $ANDROID_HOME


# En Windows

echo %ANDROID_HOME%

Problema: Emulador no inicia

bash

# Listar emuladores

emulator -list-avds


# Iniciar específico

emulator -avd NombreDelEmulador -no-snapshot-load

Problema: Puerto 8081 ocupado

bash

# En Windows

netstat -ano | findstr :8081

taskkill /PID [ID_DEL_PROCESO] /F


# En macOS/Linux

lsof -i :8081

kill -9 [PID]

🚀 Herramientas Adicionales Recomendadas

1. Visual Studio Code:

bash

# Extensiones recomendadas:

- React Native Tools

- ES7+ React/Redux/React-Native snippets

- Prettier

- ESLint

2. Watchman (Facebook):

bash

# macOS con Homebrew

brew install watchman


# Linux

sudo apt-get install watchman

3. React Native Debugger:

bash

# Descargar desde:

# https://github.com/jhen0409/react-native-debugger

4. Expo (Alternativa):

bash

# Para desarrollo más simple

npm install -g expo-cli

expo init MiProyectoExpo

📝 Checklist de Verificación Final

  • Node.js (v18+)

  • npm o yarn

  • JDK 11+ (Android)

  • Android Studio y SDK

  • Xcode (macOS, iOS)

  • React Native CLI o npx

  • Emulador configurado

  • Variables de entorno

  • Proyecto de prueba funcionando

✅ Conclusión

Has configurado exitosamente:

  1. Node.js y npm - Motor de JavaScript

  2. JDK - Para desarrollo Android

  3. Android Studio/SDK - Para Android

  4. Xcode - Para iOS (macOS)

  5. React Native CLI - Herramientas principales

  6. Emuladores - Para pruebas locales

🆘 Recursos de Ayuda

¡Felicidades! Tu entorno de desarrollo para React Native está listo. Puedes comenzar a crear aplicaciones multiplataforma. Recuerda que la configuración inicial puede ser compleja, pero una vez completada, el desarrollo será mucho más fluido

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