28. Creación de Aplicación

 

MusicApp

Introducción al Proyecto

¡Hola a todos! En este vídeo estaremos creando nuestro proyecto de aplicación de música en React Native. Vamos a configurar el entorno de desarrollo y crear la estructura inicial de nuestra aplicación paso a paso.

Paso 1: Preparación del Entorno

Antes de comenzar, asegúrate de tener instalado:

  1. Node.js (versión 14 o superior)

  2. Java Development Kit (JDK)

  3. Android Studio (para desarrollo Android)

  4. Xcode (para desarrollo iOS - solo macOS)

Paso 2: Abrir Terminal Nueva

Primero, abrimos una nueva terminal. Puedes usar:

  • Windows: PowerShell o Command Prompt

  • macOS: Terminal

  • Linux: Terminal

Paso 3: Posicionarse en el Escritorio

En la terminal, nos posicionamos en el escritorio:

bash

cd ~/Desktop

Para Windows:

bash

cd %USERPROFILE%\Desktop

Paso 4: Crear la Aplicación React Native

Ahora ejecutamos el comando para crear nuestra aplicación de React Native:

bash

npx react-native init MusicApp

Explicación del comando:

  • npx: Ejecuta comandos de paquetes npm

  • react-native: El framework que estamos usando

  • init: Comando para inicializar un nuevo proyecto

  • MusicApp: Nombre de nuestra aplicación

Paso 5: Esperar la Instalación

La instalación tomará varios minutos. Verás algo similar a esto:

text

✔ Downloading template

✔ Copying template

✔ Processing template

✔ Installing dependencies

✔ Installing CocoaPods dependencies (this may take a few minutes)

Paso 6: Navegar al Proyecto

Una vez finalizada la instalación, nos movemos al directorio del proyecto:

bash

cd MusicApp

Paso 7: Abrir el Explorador de Contenido

Abrimos el proyecto en nuestro editor de código preferido. En este ejemplo usaremos Visual Studio Code:

bash

code .

Paso 8: Limpiar el Archivo App.js

Nos dirigimos al archivo App.js que se encuentra en la raíz del proyecto y borramos todo su contenido.

Ubicación del archivo:

text

MusicApp/

├── App.js ← Archivo principal

├── index.js

├── package.json

└── ...

Paso 9: Usar el Snippet RNFE

Dentro del archivo App.js vacío, usamos el snippet rnfe (React Native Functional Export):

  1. Escribe rnfe en el archivo

  2. Presiona Tab o Enter

  3. Esto generará automáticamente:

javascript

import React from 'react';

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


const App = () => {

  return (

    <View>

      <Text></Text>

    </View>

  );

};


export default App;

Paso 10: Guardar los Cambios

Guardamos los cambios con:

  • Windows/Linux: Ctrl + S

  • macOS: Cmd + S

Paso 11: Verificar la Estructura

Tu estructura de archivos debería verse así:

text

MusicApp/

├── android/          # Configuración Android

├── ios/              # Configuración iOS

├── node_modules/     # Dependencias

├── App.js            # Archivo principal (modificado)

├── index.js          # Punto de entrada

├── package.json      # Configuración del proyecto

└── ...               # Otros archivos

Paso 12: Ejecutar la Aplicación

Para Android:

bash

npx react-native run-android

Para iOS:

bash

cd ios && pod install && cd ..

npx react-native run-ios

Código Completo Final

App.js

javascript

import React from 'react';

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


const App = () => {

  return (

    <SafeAreaView style={styles.container}>

      <View style={styles.header}>

        <Text style={styles.title}>🎵 MusicApp</Text>

        <Text style={styles.subtitle}>Tu aplicación de música favorita</Text>

      </View>

      

      <View style={styles.content}>

        <Text style={styles.welcomeText}>

          ¡Bienvenido a MusicApp!

        </Text>

        <Text style={styles.instructionText}>

          La aplicación se ha creado exitosamente

        </Text>

      </View>

      

      <View style={styles.footer}>

        <Text style={styles.footerText}>

          Próximo: Configurar navegación y componentes

        </Text>

      </View>

    </SafeAreaView>

  );

};


const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#121212',

  },

  header: {

    padding: 20,

    backgroundColor: '#1DB954',

    borderBottomLeftRadius: 20,

    borderBottomRightRadius: 20,

  },

  title: {

    fontSize: 28,

    fontWeight: 'bold',

    color: '#FFFFFF',

    textAlign: 'center',

  },

  subtitle: {

    fontSize: 16,

    color: '#FFFFFF',

    textAlign: 'center',

    marginTop: 5,

    opacity: 0.9,

  },

  content: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    padding: 20,

  },

  welcomeText: {

    fontSize: 24,

    color: '#FFFFFF',

    fontWeight: '600',

    marginBottom: 15,

  },

  instructionText: {

    fontSize: 16,

    color: '#B3B3B3',

    textAlign: 'center',

    lineHeight: 24,

  },

  footer: {

    padding: 15,

    backgroundColor: '#181818',

    borderTopWidth: 1,

    borderTopColor: '#282828',

  },

  footerText: {

    fontSize: 14,

    color: '#B3B3B3',

    textAlign: 'center',

  },

});


export default App;

Paso 13: Configurar Metadatos del Proyecto

package.json (modificar según necesidades)

json

{

  "name": "MusicApp",

  "version": "1.0.0",

  "private": true,

  "scripts": {

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

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

    "start": "react-native start",

    "test": "jest",

    "lint": "eslint ."

  },

  "dependencies": {

    "react": "18.2.0",

    "react-native": "0.72.0"

  },

  "devDependencies": {

    "@babel/core": "^7.20.0",

    "@babel/preset-env": "^7.20.0",

    "@babel/runtime": "^7.20.0",

    "@react-native/eslint-config": "^0.72.0",

    "@react-native/metro-config": "^0.72.0",

    "babel-jest": "^29.2.1",

    "eslint": "^8.19.0",

    "jest": "^29.2.1",

    "metro-react-native-babel-preset": "0.76.0",

    "prettier": "^2.4.1"

  },

  "engines": {

    "node": ">=16"

  }

}

Solución de Problemas Comunes

1. Error: "Command not found: react-native"

bash

npm install -g react-native-cli

2. Error en instalación de pods (iOS)

bash

cd ios && pod install --repo-update && cd ..

3. Limpiar caché de Metro

bash

npx react-native start --reset-cache

4. Error JDK no encontrado

  • Asegúrate de tener JDK 11 instalado

  • Configura la variable de entorno JAVA_HOME

Extensión Recomendada para VS Code

Instala la extensión React Native Tools de Microsoft para mejor soporte:

  • Autocompletado

  • Snippets (como rnfe)

  • Depuración

  • Comandos integrados

Resumen del Proceso

  1. Abrimos terminal y nos posicionamos en el escritorio

  2. Ejecutamos npx react-native init MusicApp

  3. Esperamos la instalación completa

  4. Abrimos el proyecto en VS Code

  5. Limpiamos el archivo App.js

  6. Usamos el snippet rnfe

  7. Guardamos y ejecutamos la aplicación

Próximos Pasos

En el próximo video aprenderemos a:

  • Configurar navegación con React Navigation

  • Crear componentes reutilizables

  • Implementar diseño de pantalla principal

  • Agregar funcionalidades de reproducción musical

¡La aplicación se ha creado exitosamente! En el próximo video comenzaremos con el desarrollo de la interfaz y funcionalidades principales de nuestra MusicApp.

Recuerda: Mantén tu terminal abierta para ejecutar comandos y tu editor de código para modificar los archivos. ¡Nos vemos en el próximo tutorial!

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