3.1-7. Creando primer proyecto

 

7. Creando tu Primer Proyecto con Expo

¡Hola de nuevo! 👋 En este post, te guiaré paso a paso para crear tu primer proyecto con Expo CLI y ejecutarlo en tu dispositivo móvil o emulador.

📹 Miniatura de la clase:
https://ejemplo.com/imagen-primer-proyecto-expo.jpg

Paso 1: Iniciar un Nuevo Proyecto

Ejecuta el siguiente comando en tu terminal:

bash
expo init mi-primera-app

📌 Nota: Usa nombres sin espacios (guiones bajos _ o guiones - son válidos, ej: mi_app o mi-app).

Selecciona una Plantilla (Template)

Expo te preguntará qué tipo de proyecto deseas crear:

  • Blank (En blanco): Ideal si quieres empezar desde cero.

  • Tabs (Pestañas): Incluye navegación básica con pestañas.

  • Otros templates (TypeScript, minimal, etc.)

Para este ejemplo, elegiremos "Blank" (sin pestañas).

Paso 2: Configura el Nombre de tu App

Luego, Expo te pedirá:

  • Nombre de la app (como aparecerá en el dispositivo): Ej. Mi Primera App.

  • Slug (Identificador único): Por defecto será mi-primera-app (útil para publicar luego en Expo).

✅ Ejemplo de configuración:

text
App Name: Mi Primera App  
Slug: mi-primera-app

Paso 3: Entrar a la Carpeta del Proyecto

Una vez creado, accede a la carpeta del proyecto:

bash
cd mi-primera-app

Paso 4: Iniciar el Servidor de Desarrollo

Ejecuta:

bash
expo start

Esto hará que:
✅ Se levante un servidor local (generalmente en http://localhost:19002).
✅ Se genere un QR (para probar en dispositivos físicos con Expo Go).
✅ Aparezca un menú interactivo en la terminal con opciones como:

  • Android/iOS Emulator (si tienes configurado Xcode o Android Studio).

  • LAN/Tunnel (para conexión en red local o remota).

📌 Tip: Usa Tunnel si tu celular no está en la misma red WiFi.

Paso 5: Probar tu App en el Dispositivo

  1. Descarga la app Expo Go (Android | iOS).

  2. Escanear el QR desde la app o ingresa la URL que aparece en la terminal.

📌 Nota: Si estás logueado en Expo CLI, tu proyecto aparecerá en tu perfil de Expo Dev.

Opciones Adicionales

  • Modo Producción: Ejecuta expo start --production para simular el entorno final.

  • Emuladores:

    • Android: Presiona a en la terminal después de expo start.

    • iOS (solo Mac): Presiona i.

  • Cerrar el Servidor: Usa Ctrl + C en la terminal.

¿Qué Viene Después?

En los próximos posts, veremos:
🚀 Cómo editar y personalizar tu app.
🚀 Agregar dependencias útiles (ej: navegación, estilos).
🚀 Publicar tu app en Expo Dev y Stores.

📢 ¿Dudas? ¡Déjalas en los comentarios!

🔗 Enlaces Útiles

Comentarios

Publicar un comentario

Entradas más populares de este blog

4.2-12. Componentes esenciales

    Componentes esenciales de React Native (Vignatti) 📱 En este video, exploramos y utilizamos los  componentes esenciales de React Native (Vignatti) , junto con los  NAC Decks . Estamos en la fase final de los fundamentos que todo desarrollador debe dominar antes de empezar un proyecto. 🔹  ¿Qué veremos? Equivalencia con HTML : Comparativa de los componentes de Vignatti vs. HTML. Funcionamiento clave : Cómo usar cada componente en proyectos reales. 📌 Componentes principales: 1️⃣  View  → Como un  div  en HTML. Es un contenedor que puede anidar otros componentes. Dato clave : Si el contenido excede la pantalla, ¡usa  ScrollView  para evitar cortes! 2️⃣  Image  → Similar a  <img>  en HTML. Propiedad  source  para cargar imágenes (local o URL). ¡Obligatorio!  Asignarle un estilo con  width  y  height . 3️⃣  Text  → Equivalente a  <p> ,  <span> ...
Leer más

7.5-10. ¿Como funcionan los estilos en React Native?

  ¿Cómo funcionan los estilos en React Native? En React Native, los estilos no usan CSS tradicional, sino un sistema basado en  objetos JavaScript  similar. ¡Te explico cómo dominarlo! 📌 Componente clave:  StyleSheet Es el equivalente a una hoja de estilos CSS, pero en formato de objeto: javascript import { StyleSheet } from 'react-native' ; const styles = StyleSheet . create ( { contenedor : { borderRadius : 10 , borderWidth : 2 , borderColor : '#000' , } , titulo : { fontSize : 19 , fontWeight : 'bold' , } , } ) ; 🔥 Características importantes: Soporte por componente : Cada elemento (View, Text, etc.) acepta estilos con atributos específicos. Múltiples estilos : Pásalos como un  arreglo : javascript < Text style = { [ styles . titulo , styles . centrado ] } > Hola < / Text > Estilos dinámicos : Usa condicionales para cambiar estilos: javascript < Text style = { [ styles . titulo , isActive...
Leer más

7.1-19. Creación de estilos

  Creación de Estilos en React Native: Buenas Prácticas En el post anterior, creamos nuestro primer componente en React Native. Hoy vamos a profundizar en cómo  estructurar correctamente los estilos  para mantener un código limpio y escalable. 🚫 Evita los Estilos "Inline" En el ejemplo anterior, definimos los estilos directamente en el componente: jsx < View style = { { width : 50 , height : 50 , backgroundColor : 'red' } } /> Aunque funciona,  no es una buena práctica  porque: Dificulta el mantenimiento en proyectos grandes. Hace el código menos legible. No permite reutilizar estilos. ✅ La Forma Correcta: Objetos de Estilo React Native recomienda definir los estilos en un  objeto separado  usando  StyleSheet.create() : jsx import { View , StyleSheet } from 'react-native' ; function MiComponente ( ) { return < View style = { styles . mainContainer } /> ; } const styles = StyleSheet . create ( { mainCont...
Leer más