Cómo crear una aplicación React con Expo Cli en Linux

Introducción

Expo CLI es una herramienta para desarrollar aplicaciones con Expo. Además de la interfaz de línea de comandos (CLI), también tiene una interfaz gráfica de usuario (GUI) basada en la web que se abre en el navegador web cuando inicia el proyecto; puede usarla si aún no está familiarizado con el uso del terminal o simplemente prefiere GUI, ambos tienen una funcionalidad similar.

Para obtener más información sobre la Expo, lea los siguientes artículos:

Crea una nueva aplicación

Si ha leído nuestros artículos anteriores sobre Expo, debe tener la CLI de Expo instalada en su máquina de desarrollo y el cliente de Expo en un dispositivo físico o emulador iOS o Android. De lo contrario, vuelva a la guía de instalación antes de continuar.

Inicializar el proyecto

Abra la terminal y ejecute expo init para crear un proyecto:

expo init

La blank de la plantilla de diseño se seleccionará de forma predeterminada, puede cambiar la plantilla con las teclas de flecha hacia arriba y hacia abajo, pero seleccione en blank por ahora. La CLI de la Expo ahora le pide que nombre su proyecto. Ingresemos el slug "primer proyecto" como nombre. Presione enter para continuar con la instalación de las dependencias del proyecto. Cuando el proyecto esté inicializado y listo para funcionar, el comando se cerrará.

https://expo.io/@react-navigation/NavigationPlaygroundreact-navigationNavigationPlayground

expo init ofrece varias opciones para las plantillas, incluida una plantilla de TypeScript y una con React Navigation instalada y configurada con una estructura de navegación basada en pestañas.

Nota: Es posible que vea varias peerDependencies al instalar dependencias para un nuevo proyecto. Estos son causados por algunos paquetes externos que tienen dependencias excesivamente estrictas o innecesarias, y se está trabajando para limpiarlos. No causarán ningún daño a su proyecto.

Inicie el servidor de desarrollo

Navegue a la carpeta del proyecto en la terminal con el comando cd y escriba npm start para iniciar el servidor de desarrollo local Expo CLI:

cd first-project

npm start

Expo CLI inicia Metro Bundler, que es un servidor HTTP que compila el código JavaScript de nuestra aplicación usando Babel y lo sirve a la aplicación Expo. También abre Expo Dev Tools, una interfaz gráfica para Expo CLI.

yarn startnpm startexpo startexpo start

Puede cerrar la ventana Expo Developer Tools y evitar que se inicie en el futuro presionando shift+d en el terminal que ejecuta la interfaz de línea de comandos de Expo. Reinicie en cualquier momento presionando d en el terminal que ejecuta Expo CLI.

Abra la aplicación en su teléfono /tableta

Puede abrir el proyecto en varios dispositivos al mismo tiempo. Continúe y pruébelo simultáneamente en un teléfono iPhone y Android si tiene ambos a mano.

En su iPhone o iPad, abra la aplicación "Cámara" predeterminada de Apple y escanee el código QR que ve en la terminal o en Expo Dev Tools.
En el dispositivo Android, presione "Escanear código QR" en la pestaña "Proyectos" de la aplicación cliente de Expo y escanee el código QR que se muestra en la terminal o en Expo Dev Tools.

Para ejecutar la aplicación no es necesario crear ningún código nativo porque se ejecuta en el cliente Expo y la CLI lo instalará automáticamente en el simulador de iOS o en cualquier emulador o dispositivo Android conectado.

Si cierra expo-cli o apaga su computadora, ya no podrá acceder a la aplicación desde su dispositivo. Veremos cómo hacerlo siempre disponible más adelante

¿La aplicación no se carga en su dispositivo?

Primero, asegúrese de estar en la misma red wifi en su computadora y en su dispositivo. Si aún no funciona, podría deberse a la configuración del enrutador; es común para las redes públicas. Puede evitar esto eligiendo el tipo de conexión "Túnel" en Expo Dev Tools, luego escaneando el código QR nuevamente.

El uso del tipo de conexión "Túnel" hará que la recarga de la aplicación sea considerablemente más lenta que "LAN" o "Local", por lo que es mejor evitar los túneles siempre que sea posible. Es posible que deba instalar un simulador /emulador para acelerar el desarrollo si necesita "Tunnel" para acceder a su computadora desde otro dispositivo en la red.

Haz el primer cambio

Abra App.js y cambie el texto a " Hello, world! ". Debería verlo actualizado en su dispositivo. Este es un gran progreso, ahora tenemos la cadena de herramientas Expo ejecutándose en nuestra máquina y podemos editar el código fuente de un proyecto y ver los cambios en vivo en nuestro dispositivo.

¿Los cambios no aparecen en el dispositivo?

El cliente Expo está configurado de forma predeterminada para recargar automáticamente la aplicación cada vez que se cambia un archivo, pero asegurémonos de habilitarlo en caso de que las cosas no funcionen.

Primero, asegúrese de tener habilitado el modo de desarrollo en CLI Expo.
Luego, cierre la aplicación y vuelva a abrirla.
Una vez que la aplicación esté abierta nuevamente, agite su dispositivo para que aparezca el menú de desarrollador. Si está utilizando un emulador, presione ⌘+d para iOS o ctrl+m para Android.
Si ve Enable Live Reload, presiónelo y su aplicación se recargará. Si ve, Disable Live Reload salga del menú del desarrollador e intente hacer otro cambio.

Conclusión

En esta guía hemos visto cómo crear un proyecto con Expo Framework desde la línea de comandos.

Aquí puedes encontrar todos los artículos dedicados a la Expo: