instalacion-5. Instalando Expo CLI

 

5. Instalando Expo CLI: Primeros Pasos para Desarrollar con React Native

¡Hola a todos! 👋 En este post, vamos a ver cómo instalar Expo CLI, una herramienta esencial para desarrollar aplicaciones móviles con React Native de manera rápida y sencilla.

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

¿Qué es Expo?

Expo es un framework que nos permite crear aplicaciones móviles multiplataforma (iOS y Android) utilizando JavaScript y React Native, sin necesidad de configurar entornos complejos como Xcode o Android Studio.

Pasos para Instalar Expo CLI

1. Opción Online: Snack (Sin Instalación)

Si no quieres instalar nada en tu computadora, puedes usar Snack, una herramienta en línea de Expo que te permite probar y desarrollar aplicaciones directamente desde el navegador.

👉 Ventajas:

  • No necesitas instalar Node.js ni Expo CLI.

  • Puedes ver los cambios en tiempo real.

  • Ideal para principiantes o pruebas rápidas.

Si prefieres esta opción, puedes saltarte la instalación y comenzar directamente en Snack.

2. Instalar Node.js

Para trabajar con Expo CLI localmente, necesitamos tener Node.js instalado.

  • Windows/Mac: Descarga el instalador desde nodejs.org y sigue los pasos.

  • Linux: Puedes instalarlo desde la terminal o descargando el paquete manualmente.

🔍 Verificar instalación:
Abre tu terminal y ejecuta:

bash
node -v

Si aparece la versión (ejemplo: v16.14.2), ¡todo está listo!

3. Instalar Expo CLI Globalmente

Una vez instalado Node.js, ejecutamos el siguiente comando en la terminal:

bash
npm install -g expo-cli

Esto instalará Expo CLI de manera global en tu sistema.

✅ Verificación:
Ejecuta:

bash
expo --version

Si ves la versión (ejemplo: 6.0.0), ¡ya estás listo para crear tu primer proyecto!

¿Qué Sigue?

En el próximo post/video, veremos cómo crear nuestro primer proyecto con Expo y ejecutarlo en un emulador o dispositivo físico.

📌 Recuerda: Si tienes algún problema durante la instalación, déjame un comentario y con gusto te ayudaré.

¡Nos vemos en la siguiente clase! 🚀

🔗 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

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. Ejecu...
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