7. Creando nuestra primera aplicación

 

Tutorial: Creando Nuestra Primera Aplicación React Native

🚀 Parte 7: Creando Nuestra Primera Aplicación

🎯 Objetivo:

Crear y ejecutar tu primera aplicación React Native desde cero, comprendiendo la estructura del proyecto y haciendo tus primeros cambios.

📋 Paso 1: Preparación del Entorno

1.1 Abrir Visual Studio Code

  1. Busca Visual Studio Code en el menú de inicio

  2. Ejecútalo (si no lo tienes, descárgalo de code.visualstudio.com)

  3. Espera a que cargue completamente

📁 Paso 2: Crear Carpeta del Proyecto

2.1 Abrir el Explorador

  1. En VS Code, haz clic en el icono del Explorador (primero de la barra lateral) o presiona Ctrl+Shift+E

  2. Haz clic en "Open Folder" (Abrir Carpeta)

2.2 Navegar al Escritorio

  1. En la ventana de diálogo, ve a tu Escritorio

  2. Crea una nueva carpeta llamada proyectos:

    • Haz clic en "Nueva carpeta"

    • Escribe proyectos

    • Presiona Enter

  3. Selecciona la carpeta proyectos y haz clic en "Seleccionar carpeta"

2.3 Verificar Estructura

  1. Cierra cualquier pestaña abierta del anterior proyecto

  2. Verifica que en el Explorador de VS Code ves la carpeta proyectos vacía

💻 Paso 3: Abrir Terminal

3.1 Abrir Nueva Terminal

  1. Ve al menú superior: Terminal → New Terminal

  2. O usa el atajo: `Ctrl+Shift+`` (acento grave)

  3. Verifica que la terminal se abra en la ruta correcta:

  4. text

  5. C:\Users\TuUsuario\Desktop\proyectos>

3.2 Tipos de Terminal

  • PowerShell (recomendado para Windows)

  • Command Prompt

  • Git Bash (si lo tienes instalado)

🛠️ Paso 4: Crear la Aplicación

4.1 Usar npx para Crear Proyecto

  1. En la terminal, escribe el siguiente comando:

  2. powershell

  3. npx react-native init myapp
    Explicación del comando:

    • npx: Ejecuta paquetes npm sin instalarlos globalmente

    • react-native init: Comando para inicializar nuevo proyecto

    • myapp: Nombre de tu aplicación (puedes cambiarlo)

  4. Presiona Enter para ejecutar

4.2 Proceso de Creación

Durante la creación verás:

powershell

✔ Downloading template

✔ Copying template

✔ Processing template

✔ Installing dependencies

✔ Installing CocoaPods (solo para iOS, en Windows puede saltarse)

⚠️ Nota importante:

  • Esto puede tomar varios minutos (5-10 min dependiendo de tu internet)

  • Se descargarán aproximadamente 200-300 MB de dependencias

  • No cierres la terminal durante el proceso

4.3 Verificar Creación Exitosa

Al finalizar deberías ver:

powershell

✅ Successfully created project myapp

✅ Get started with the project:

  cd myapp

  npx react-native run-android

📂 Paso 5: Navegar al Proyecto

5.1 Cambiar al Directorio

  1. En la terminal, ejecuta:

  2. powershell

  3. cd myapp

  4. Verifica que estás en la carpeta correcta:

  5. powershell

  6. pwd   # En PowerShell muestra la ruta actual
    Debería mostrar: C:\Users\TuUsuario\Desktop\proyectos\myapp

📱 Paso 6: Ejecutar la Aplicación en Android

6.1 Antes de Ejecutar

Asegúrate de que:

  1. ✅ Android Studio esté instalado

  2. ✅ Emulador Android esté corriendo o dispositivo físico conectado

  3. ✅ Variables de entorno estén configuradas

6.2 Iniciar la Aplicación

  1. En la terminal, ejecuta:

  2. powershell

  3. npx react-native run-android

  4. Proceso de construcción:

  5. powershell

⚡️  Starting Metro Bundler

🔄  Building app...

📦  Installing APK on device...

  1. 🚀  Launching app...

  2. Primera ejecución puede tomar más tiempo (2-5 minutos)

6.3 Ventanas que se Abrirán

  1. Terminal de Metro Bundler (servidor de desarrollo):

    • Muestra Running "myapp" on "device_id"

    • Escucha cambios en el código

    • Hot Reload activado por defecto

  2. Emulador Android (si usas emulador):

    • Se iniciará automáticamente

    • Mostrará tu aplicación

📱 Paso 7: Explorar la Aplicación

7.1 Pantalla por Defecto

Al abrir la aplicación verás:

  • Logo de React Native

  • Texto de instrucciones

  • Enlaces de documentación

  • Contador de toques (si haces clic)

7.2 Estructura Visual

text

┌─────────────────────────────────┐

│        REACT NATIVE             │

│                                 │

│  [Logo React]                   │

│                                 │

│  Welcome to React Native!       │

│                                 │

│  Step One                       │

│  See Your Changes               │

│                                 │

│  Step Two                       │

│  Debug                          │

│                                 │

│  Step Three                     │

│  Learn More                     │

└─────────────────────────────────┘

✏️ Paso 8: Hacer Tu Primer Cambio

8.1 Localizar el Archivo

  1. En VS Code, abre el explorador de archivos

  2. Navega a: myapp → App.js

  3. Haz clic en App.js para abrirlo

8.2 Encontrar el Texto a Cambiar

  1. Busca en el código la línea:

  2. javascript

  3. <Text style={styles.sectionTitle}>Step One</Text>

  4. Cámbiala por:

  5. javascript

  6. <Text style={styles.sectionTitle}>Mi Primer Cambio</Text>

8.3 Guardar los Cambios

  1. Guarda el archivo con:

    • Ctrl+S o

    • Archivo → Guardar

8.4 Ver Cambios en Tiempo Real

  1. Observa el emulador/dispositivo

  2. ¡El cambio debería aparecer automáticamente!

  3. Esto es Fast Refresh (antes Hot Reload) en acción

🔍 Paso 9: Entender la Estructura del Proyecto

9.1 Archivos y Carpetas Principales

text

myapp/

├── android/          # Código nativo Android

├── ios/             # Código nativo iOS (no usado en Windows)

├── node_modules/    # Dependencias npm (NO EDITAR)

├── __tests__/       # Tests de la aplicación

├── App.js           # ✅ Punto de entrada PRINCIPAL

├── app.json         # Configuración de la app

├── babel.config.js  # Configuración de Babel

├── index.js         # Punto de entrada de JavaScript

├── metro.config.js  # Configuración del bundler

├── package.json     # ✅ Dependencias y scripts

└── package-lock.json# Versiones exactas de dependencias

9.2 Scripts Disponibles en package.json

json

"scripts": {

  "android": "react-native run-android",

  "ios": "react-native run-ios",

  "start": "react-native start",

  "test": "jest",

  "lint": "eslint ."

}

Uso:

powershell

npm run android    # Ejecutar en Android

npm start          # Iniciar Metro Bundler

🐛 Paso 10: Solución de Problemas Comunes

❌ Error: "SDK location not found"

Solución:

powershell

# Verifica variables de entorno

echo $env:ANDROID_HOME


# O en Android Studio: File → Settings → Android SDK

❌ Error: "Device not found"

Solución:

powershell

# Listar dispositivos disponibles

adb devices


# Si usas emulador, ábrelo primero desde Android Studio

❌ Error: "Metro Bundler not starting"

Solución:

powershell

# Cierra todo y ejecuta en orden:

npm start          # En una terminal

npm run android    # En otra terminal

❌ Error: "Port 8081 already in use"

Solución:

powershell

# Encuentra el proceso usando el puerto

netstat -ano | findstr :8081


# Mata el proceso (reemplaza PID con el número)

taskkill /PID [PID] /F

📝 Paso 11: Personalización Básica

11.1 Cambiar el Título Principal

En App.js, encuentra:

javascript

<Text style={styles.sectionTitle}>Welcome to React Native!</Text>

Cambia a:

javascript

<Text style={styles.sectionTitle}>¡Mi Primera App React Native!</Text>

11.2 Cambiar Color de Fondo

En App.js, en los estilos:

javascript

const styles = StyleSheet.create({

  sectionContainer: {

    marginTop: 32,

    paddingHorizontal: 24,

    backgroundColor: '#e6f7ff',  // Azul claro

  },

});

11.3 Agregar tu Nombre

javascript

<Text style={styles.sectionDescription}>

  Creado por: [Tu Nombre]

</Text>

🎯 Paso 12: Pruebas Adicionales

12.1 Probar Hot Reload

  1. Haz varios cambios en App.js

  2. Guarda cada cambio (Ctrl+S)

  3. Observa cómo la app se actualiza instantáneamente

12.2 Probar en Diferentes Dispositivos

  1. Crea diferentes emuladores en Android Studio

  2. Ejecuta en cada uno:

  3. powershell

  4. npx react-native run-android --deviceId=[ID_DEL_DISPOSITIVO]

12.3 Probar Build de Producción

powershell

# En la carpeta android

cd android

.\gradlew assembleRelease

📊 Resumen de Comandos Aprendidos

Comando

Descripción

npx react-native init [nombre]

Crea nueva app React Native

cd [nombre]

Navega al directorio del proyecto

npx react-native run-android

Ejecuta app en Android

npm start

Inicia Metro Bundler

npm test

Ejecuta tests

adb devices

Lista dispositivos Android conectados

🎨 Reto Opcional

Modifica la app para que incluya:

  1. ✅ Tu nombre completo

  2. ✅ Tu foto (usa <Image>)

  3. ✅ Un botón que cambie de color al presionar

  4. ✅ Un contador que aumente con cada clic

Pista: Busca en la documentación oficial:

🎬 Próximos Pasos

En el siguiente tutorial aprenderemos:

  • Estructura de componentes React Native

  • Manejo de estados y props

  • Navegación entre pantallas

  • Consumo de APIs

🎉 ¡Felicidades! Has creado y ejecutado exitosamente tu primera aplicación React Native. Ahora tienes una base sólida para comenzar tu viaje en el desarrollo móvil multiplataforma

Comentarios

Publicar un comentario

Entradas más populares de este blog

18. Visualizar nuestros componentes limpios con StyleSheet

  Tema: 18. Visualizar nuestros componentes limpios con StyleSheet Objetivo: Aprender a organizar y limpiar los estilos de componentes en React Native utilizando StyleSheet.create() , separando la lógica de presentación del JSX para mejorar la legibilidad y mantenibilidad del código. Contenido del tutorial: 1. ¿Qué es StyleSheet? Definición: Una API de React Native que permite definir estilos de manera estructurada y optimizada. Ventajas: Mejora el rendimiento (caché de estilos). Separa estilos de la lógica del componente. Facilita el mantenimiento y reutilización. Valida los nombres de propiedades en tiempo de desarrollo. 2. Importar StyleSheet Se importa desde react-native : jsx import { StyleSheet } from 'react-native' ; 3. Estructura básica de StyleSheet.create() Sintaxis: jsx const styles = StyleSheet . create ({    nombreDelEstilo : {      propiedad1 : valor1 ,      propiedad2 : valor2 ,    },    o...
Leer más

15. Componente Image

  Tutorial: Componente Image en React Native 📱 Parte 15: Componente Image - Mostrando Imágenes en tu App 🎯 Objetivo: Aprender a usar el componente Image para mostrar imágenes en React Native desde diferentes fuentes: archivos locales, URLs remotas y base64. 📸 Analizando el Ejemplo de la Imagen Observando el código de la imagen: javascript < Text style = {{ margin : 5 , fontSize : 20 , fontWeight : 'bold' , color : 'gray' }} >   Componente Imagen </ Text > { /* Imagen local */ } < Image   style = {{ width : 150 , height : 150 }}   source = { require ( './imgs/react-native.jpg' )} /> { /* Imagen remota */ } < Image   style = {{ width : 150 , height : 150 }}   source = {{ uri : 'https://reactnative.dev/img/tiny_logo.png' }} /> Resultado visual esperado: text ┌─────────────────────────────────┐ │ Componente Imagen               │ │         ...
Leer más

Tema: 23. Justify Content en Flexbox para Column (Columna) en React Nativ

Objetivo: Comprender y aplicar la propiedad justifyContent en contenedores con flexDirection: 'column' (valor por defecto) para controlar la distribución vertical de elementos en React Native. Contenido del tutorial: 1. Introducción a justifyContent en columnas Por defecto en React Native: flexDirection: 'column' Cuando usamos flexDirection: 'column' : Eje principal → Vertical (de arriba a abajo) Eje cruzado → Horizontal (de izquierda a derecha) justifyContent controla: Distribución de elementos a lo largo del eje vertical 2. Configuración inicial del ejemplo Código base para columnas: jsx import React from 'react' ; import { View , Text , StyleSheet } from 'react-native' ; const App = () => {    return (      < View style ={ styles . container }>        < View style ={ styles . boxSize }>          < Text style ={ styles . text }> 1 </ Text > ...
Leer más