14. Creando mi primera aplicacion

 

Tutorial: Creando Mi Primera Aplicación con React Native

En este tutorial aprenderás a crear tu primera aplicación móvil desde cero usando React Native, siguiendo los pasos del contenido proporcionado.

🎯 Objetivo del Tutorial

Crear y ejecutar tu primera aplicación React Native, entendiendo la estructura básica del proyecto.

📁 Paso 1: Preparar el Entorno de Trabajo

Crear Carpeta para Proyectos:

bash

# Abre tu terminal (CMD, PowerShell, o Terminal)

# Navega a tu carpeta de documentos o donde prefieras guardar proyectos

cd ~/Documentos  # En macOS/Linux

cd C:\Users\TuUsuario\Documents  # En Windows


# Crear carpeta para proyectos React Native

mkdir ReactNativeProjects


# Entrar a la carpeta

cd ReactNativeProjects

Verificar Herramientas Instaladas:

bash

# Verificar Node.js y npm

node --version  # Debería mostrar v18.x.x o superior

npm --version   # Debería mostrar 9.x.x o superior


# Verificar React Native CLI

npx react-native --version

🚀 Paso 2: Crear el Proyecto con React Native

Comando para Crear Proyecto:

bash

# Usando npx (recomendado - descarga última versión)

npx react-native@latest init MiPrimeraApp

Explicación del Comando:

  • npx: Ejecuta paquetes npm sin instalarlos globalmente

  • react-native@latest: Usa la última versión de React Native

  • init: Comando para inicializar nuevo proyecto

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

Durante la Creación:

bash

# Verás algo como esto:

✓ Downloading template

✓ Copying template

✓ Processing template

✓ Installing dependencies

✓ Installing CocoaPods (si estás en macOS)

✓ Initialized Git repository

Opciones Adicionales:

bash

# Con TypeScript (recomendado para proyectos serios)

npx react-native@latest init MiPrimeraApp --template react-native-template-typescript


# Con versión específica

npx react-native@0.72.0 init MiPrimeraApp

📂 Paso 3: Explorar la Estructura del Proyecto

Entrar al Proyecto Creado:

bash

cd MiPrimeraApp

Estructura de Carpetas Generada:

text

MiPrimeraApp/

├── node_modules/      # Dependencias instaladas

├── __tests__/         # Tests (si se configuraron)

├── android/           # Código nativo Android

├── ios/               # Código nativo iOS (solo en macOS)

├── src/               # (Posiblemente, depende del template)

├── .gitignore         # Archivos a ignorar por Git

├── .prettierrc.js     # Configuración de formateo

├── .eslintrc.js       # Configuración de linting

├── App.tsx/App.js     # Componente principal

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

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

├── index.js           # Punto de entrada

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

├── package.json       # Dependencias y scripts

└── tsconfig.json      # Configuración TypeScript (si usas TS)

Archivos Principales Explicados:

  1. App.js / App.tsx - Componente principal

javascript

// Contenido inicial típico

import React from 'react';

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


const App = () => {

  return (

    <View style={styles.container}>

      <Text style={styles.text}>¡Hola Mundo React Native!</Text>

    </View>

  );

};


const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  text: {

    fontSize: 24,

    fontWeight: 'bold',

  },

});


export default App;

  1. package.json - Dependencias y scripts

json

{

  "name": "MiPrimeraApp",

  "version": "0.0.1",

  "private": true,

  "scripts": {

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

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

    "start": "react-native start",

    "test": "jest"

  },

  "dependencies": {

    "react": "18.2.0",

    "react-native": "0.72.0"

  }

}

  1. index.js - Punto de entrada

javascript

import {AppRegistry} from 'react-native';

import App from './App';

import {name as appName} from './app.json';


AppRegistry.registerComponent(appName, () => App);

💻 Paso 4: Abrir el Proyecto en Visual Studio Code

Desde la Terminal:

bash

# Navega a tu proyecto

cd MiPrimeraApp


# Abrir con VS Code

code .

Desde VS Code Manualmente:

  1. Abre Visual Studio Code

  2. File → Open Folder (Ctrl+K Ctrl+O)

  3. Navega a ReactNativeProjects/MiPrimeraApp

  4. Haz clic en "Select Folder"

Primera Vez en VS Code:

bash

# VS Code preguntará si confías en los autores

# Haz clic en "Yes, I trust the authors"

# Esto permite que las extensiones funcionen correctamente

Instalar Extensiones Recomendadas (si no las tienes):

En VS Code, ve a Extensiones (Ctrl+Shift+X) y busca:

  • React Native Tools (Microsoft)

  • ES7+ React/Redux/React-Native snippets

  • ESLint

  • Prettier - Code formatter

📱 Paso 5: Ejecutar la Aplicación en Android

Preparar Emulador o Dispositivo:

bash

# Opción A: Usar emulador Android

# 1. Abre Android Studio

# 2. Ve a AVD Manager

# 3. Inicia tu emulador (Pixel 5 recomendado)


# Opción B: Usar dispositivo físico

# 1. Activa "Modo desarrollador" en tu Android

# 2. Activa "Depuración USB"

# 3. Conéctalo por USB

Ejecutar la App:

bash

# Terminal 1 - Iniciar servidor Metro (mantener abierto)

npx react-native start


# Terminal 2 - Compilar y ejecutar en Android

npx react-native run-android

Atajos en Metro Bundler:

bash

# Cuando el servidor Metro esté corriendo:

# - Presiona 'r' para recargar

# - Presiona 'd' para abrir menú de desarrollo

# - Presiona 'c' para limpiar consola

Verificar que Funciona:

  • Deberías ver: "¡Hola Mundo React Native!" en pantalla

  • En la terminal: "BUILD SUCCESSFUL"

  • En Metro Bundler: "Connected"

🍎 Paso 6: Ejecutar la Aplicación en iOS (solo macOS)

bash

# Asegúrate de tener Xcode instalado

xcode-select --install


# Instalar CocoaPods (solo primera vez)

cd ios && pod install && cd ..


# Terminal 1 - Iniciar servidor

npx react-native start


# Terminal 2 - Ejecutar en iOS

npx react-native run-ios


# Para emulador específico

npx react-native run-ios --simulator="iPhone 14"

🔧 Paso 7: Modificar Tu Primera App

Editar App.js:

javascript

// Reemplaza el contenido de App.js con:

import React from 'react';

import {

  View,

  Text,

  StyleSheet,

  TouchableOpacity,

  Alert,

} from 'react-native';


const App = () => {

  const handlePress = () => {

    Alert.alert('¡Felicidades!', '¡Tu primera app funciona!');

  };


  return (

    <View style={styles.container}>

      <Text style={styles.title}>Mi Primera App</Text>

      <Text style={styles.subtitle}>Con React Native 🚀</Text>

      

      <TouchableOpacity style={styles.button} onPress={handlePress}>

        <Text style={styles.buttonText}>Presióname</Text>

      </TouchableOpacity>

    </View>

  );

};


const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#f5f5f5',

    justifyContent: 'center',

    alignItems: 'center',

    padding: 20,

  },

  title: {

    fontSize: 32,

    fontWeight: 'bold',

    color: '#333',

    marginBottom: 10,

  },

  subtitle: {

    fontSize: 18,

    color: '#666',

    marginBottom: 40,

  },

  button: {

    backgroundColor: '#007AFF',

    paddingHorizontal: 30,

    paddingVertical: 15,

    borderRadius: 10,

    elevation: 3, // Sombra en Android

    shadowColor: '#000', // Sombra en iOS

    shadowOffset: {width: 0, height: 2},

    shadowOpacity: 0.2,

    shadowRadius: 4,

  },

  buttonText: {

    color: 'white',

    fontSize: 18,

    fontWeight: '600',

  },

});


export default App;

Ver Cambios en Tiempo Real:

bash

# En el emulador/dispositivo:

# 1. Agita el dispositivo (o Ctrl+M en emulador)

# 2. Selecciona "Enable Fast Refresh"

# 3. Los cambios se reflejarán automáticamente al guardar

🧪 Paso 8: Scripts Útiles en package.json

Agregar Scripts Personalizados:

json

{

  "scripts": {

    "start": "react-native start",

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

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

    "clean": "cd android && ./gradlew clean && cd ..",

    "clean-all": "npm run clean && rm -rf node_modules && npm install",

    "build-android": "cd android && ./gradlew assembleRelease",

    "build-ios": "cd ios && xcodebuild -workspace MiPrimeraApp.xcworkspace -scheme MiPrimeraApp -configuration Release",

    "lint": "eslint .",

    "format": "prettier --write ."

  }

}

Usar los Scripts:

bash

# Limpiar cache y reinstalar

npm run clean-all


# Ejecutar con limpieza

npm run clean && npm run android


# Formatear código

npm run format

🐛 Paso 9: Solución de Problemas Comunes

Error: "SDK location not found"

bash

# Verificar ANDROID_HOME

echo $ANDROID_HOME  # macOS/Linux

echo %ANDROID_HOME% # Windows


# Crear archivo local.properties en android/

echo "sdk.dir=/Users/tuusuario/Library/Android/sdk" > android/local.properties

Error: Metro Bundler no conecta

bash

# Reiniciar Metro

npm start -- --reset-cache


# Cambiar puerto

npm start -- --port 8088

Error: Emulador no detectado

bash

# Listar dispositivos Android

adb devices


# Si no aparece, reiniciar adb

adb kill-server

adb start-server

App no se actualiza al guardar

bash

# Habilitar Fast Refresh:

# 1. Agitar dispositivo (Ctrl+M en emulador)

# 2. Seleccionar "Enable Fast Refresh"

# 3. Asegurarse de que Metro esté corriendo

📊 Paso 10: Buenas Prácticas Iniciales

1. Control de Versiones con Git:

bash

# Inicializar repositorio (si no se hizo automáticamente)

git init

git add .

git commit -m "Initial commit - Mi primera app React Native"


# Crear .gitignore si no existe

echo "

# React Native

node_modules/

.expo/

dist/

*.log


# Android

android/.gradle/

android/app/build/

android/build/


# iOS

ios/build/

Pods/

" > .gitignore

2. Estructura de Carpetas Recomendada:

text

src/

├── components/     # Componentes reutilizables

├── screens/        # Pantallas/views

├── navigation/     # Configuración de navegación

├── services/       # Llamadas a API, lógica de negocio

├── utils/          # Funciones helper

├── constants/      # Constantes, colores, estilos

└── assets/         # Imágenes, fuentes, etc.

3. Crear Estructura Básica:

bash

mkdir -p src/{components,screens,navigation,services,utils,constants,assets}

✅ Verificación Final

Checklist de Éxito:

  • Proyecto creado con npx react-native init

  • Carpeta del proyecto explorada

  • VS Code abierto con el proyecto

  • App.js modificado con éxito

  • Aplicación ejecutada en emulador/dispositivo

  • Fast Refresh funcionando

  • Cambios reflejados en tiempo real

🎉 ¡Felicidades!

Has creado exitosamente tu primera aplicación React Native. Has logrado:

✅ Crear proyecto desde cero
✅ Explorar estructura de archivos
✅ Ejecutar aplicación en emulador/dispositivo
✅ Modificar código y ver cambios en tiempo real
✅ Configurar entorno de desarrollo

📚 Próximos Pasos Recomendados

  1. Aprender Componentes Básicos:

    • View, Text, Image

    • TouchableOpacity, Button

    • TextInput, ScrollView

  2. Explorar Navegación:

  3. bash

  4. npm install @react-navigation/native @react-navigation/stack

  5. Agregar Estilos:

    • StyleSheet API

    • Flexbox layout

    • Platform-specific styles

  6. Manejar Estado:

    • useState Hook

    • useEffect Hook

    • Context API

🆘 Recursos de Ayuda

¡Excelente trabajo! Ahora tienes las bases para comenzar tu viaje en el desarrollo móvil con React Native. ¡Sigue experimentando y construyendo

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