2.2-6. Comandos esenciales en Expo

 

6. Comandos Esenciales en Expo: Guía para Iniciar tu Proyecto

¡Bienvenidos de nuevo! 👋 En este post, vamos a explorar los comandos esenciales de Expo CLI que necesitarás para crear, ejecutar y gestionar tus proyectos de React Native.

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

Requisitos Previos

Antes de comenzar, asegúrate de tener instalado:
✅ Node.js (v16 o superior recomendado).
✅ Expo CLI instalado globalmente (npm install -g expo-cli).
✅ Un editor de código (VS Code, Sublime, Atom, etc.).

Comandos Básicos de Expo CLI

1. expo init [nombre-del-proyecto]

Este comando crea un nuevo proyecto de Expo.

🔹 Ejemplo:

bash
expo init mi-primer-proyecto

📌 Recomendación: Usa guiones (-) en lugar de espacios para el nombre del proyecto (ejemplo: mi-app en lugar de mi app).

2. expo start

Inicia el servidor de desarrollo de Expo y abre una interfaz en tu navegador con un QR.

🔹 ¿Qué hace?

  • Compila tu aplicación para iOS y Android.

  • Genera un código QR que puedes escanear con la app Expo Go (más adelante veremos cómo).

  • También muestra opciones para ejecutar en emuladores o dispositivos conectados.

📌 Nota: Este comando debe estar activo mientras desarrollas, ya que mantiene tu app en vivo.

**3. Expo Go (App Móvil)

Para probar tu aplicación en un dispositivo físico, necesitas:

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

  2. Escanear el QR que aparece en la terminal o en el navegador.

📌 Ventaja: No necesitas conectar tu celular por cable, solo estar en la misma red WiFi.

Flujo de Trabajo Recomendado

  1. Crea un proyecto:

    bash
    expo init mi-app

  2. Entra a la carpeta del proyecto:

    bash
    cd mi-app

  3. Inicia el servidor de desarrollo:

    bash
    expo start

  4. Prueba en tu dispositivo:

    • Abre Expo Go en tu celular.

    • Escanea el QR o usa el enlace que aparece en la terminal.

¿Qué Viene Después?

En los siguientes posts, veremos:
🚀 Cómo personalizar tu aplicación.
🚀 Agregar dependencias y plugins útiles.
🚀 Publicar tu app en las stores (Google Play / App Store).

📌 ¿Dudas? Déjalas en los comentarios y te ayudaré.

¡Nos vemos en el siguiente tutorial! 🚀

🔗 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