3.2-24. Mi primer proyecto - TestingApp-FH

https://docs.expo.dev/

Configurando tu Ambiente de Desarrollo con Expo

https://via.placeholder.com/800x450

¡Es hora de comenzar a configurar nuestro entorno de desarrollo con Expo!

Expo es una herramienta increíble que simplifica el desarrollo de aplicaciones móviles con React Native. Una de sus mayores ventajas es la variedad de formas en las que podemos trabajar con él.

En este post, nos enfocaremos en configurar nuestro primer proyecto y probarlo en dispositivos reales. ¡Vamos paso a paso!

Creando un Proyecto con Expo

Para comenzar, usaremos el comando:

bash
npx create-expo-app@latest mi-app --template blank-typescript

¿Qué significan estas opciones?

  • blank-typescript: Crea un proyecto mínimo con TypeScript configurado.

  • Otras plantillas disponibles:

    • blank: Proyecto básico sin TypeScript.

    • tabs: Incluye un sistema de pestañas listo para usar.

    • bare-minimum: Solo lo esencial (no recomendado para principiantes).

Una vez ejecutado, el comando generará la estructura del proyecto.

Ejecutando la Aplicación

  1. Abre el proyecto en tu editor (por ejemplo, Visual Studio Code):

    bash
    cd mi-app
code .

  2. Inicia el servidor de desarrollo:

    bash
    npm start

    Esto generará un código QR en la terminal.

  3. Escanea el QR con la app Expo Go (disponible en iOS y Android).

    🔹 Requisito: Tu teléfono y computadora deben estar en la misma red Wi-Fi.

Live Reload: Cambios en Tiempo Real

Una de las mejores características de Expo es el Hot Reloading. Si modificas el archivo App.tsx y guardas, los cambios se reflejarán al instante en tu dispositivo.

tsx
// App.tsx
<Text>¡Hola Mundo!!!!</Text>

¡Verás cómo se actualiza automáticamente!

Próximos Pasos

Ahora que ya puedes probar tu app en dispositivos físicos, en las próximas clases configuraremos:

  • Emuladores de Android e iOS (para desarrollo sin dispositivo físico).

  • Configuraciones avanzadas (builds automáticos, EAS, etc.).

Conclusión

Con Expo, el desarrollo móvil es más rápido y accesible. ¡Ya tienes tu primera app corriendo! 🎉

¿Qué te pareció este primer paso? Déjame tus comentarios y nos vemos en la próxima clase.

🚀 ¿Listo para seguir aprendiendo? ¡No olvides descargar la app Expo Go si aún no lo has hecho!

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