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

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