En 2020 desarrollar aplicaciones móviles con React Native y Expo es algo tremendamente sencillo, sean aplicaciones híbridas o aplicaciones nativas. Lo único que debemos saber es JavaScript y HTML, el resto lo pone React Native a través de sus componentes y la gran cantidad de paquetes que la comunidad ofrece día a día.
En esta entrada aprenderás a crear tu primera aplicación móvil con React Native y Expo, será una aplicación híbrida, ¿pero qué significa una aplicación nativa y qué diferencias hay entre una aplicación nativa y una aplicación híbrida? Veamos.
Las aplicaciones híbridas son el tipo de aplicación más sencilla en el mundo del desarrollo móvil, con HTML, JavaScript y CSS podrás crear un archivo .apk (extensión de las aplicaciones Android) o .ipa(extensión de las aplicaciones iOS), no necesitas nada más. La gran ventaja que nos ofrece el desarrollo híbrido es que no necesitas preocuparte por configurar y compilar tu proyecto con Xcode o Android Studio, es decir, un simple comando será capaz de crear los archivos .apk o .ipa listos para publicar en sus respectivas Store’s.
Cuando creamos una aplicación móvil con React Native y Expo por defecto se crea una aplicación híbrida, pero si lo deseamos, podemos convertir esta aplicación en una aplicación nativa de una forma muy sencilla utilizando el comando detach de Expo CLI.
Mientras el código de una aplicación Nativa o Híbrida en React Native practicamente será el mismo, la gran diferencia viene en la forma de configurar, instalar dependencias y compilar tu APP para Android o iOS. Lidiar con Xcode o Android Studio puede ser un verdadero dolor de cabeza, más Xcode que Android Studio, pero es algo que siempre debes tener en cuenta en tus desarrollos, sobre todo por el incremento del tiempo que te va a llevar.
Si nos ponemos en el caso de una sencilla aplicación nativa para iOS con Expo, deberás hacer lo siguiente:
Esto, que son 4 líneas, la primera vez que lo hagas te garantizo que desearas no haber tenido que crear nunca una aplicación móvil nativa con React Native y Expo en este caso (te habla la voz de la experiencia). Pero no te preocupes, si te ves en este caso, simplemente sigue los 2 siguientes cursos, uno para Android y otro para iOS, lo explico todo paso a paso con un ejemplo real.
Curso App de Suscripciones con React Native para Android
Curso para publicar aplicaciones en la App Store, ejemplo con React Native
Teniendo claro qué son las aplicaciones nativas y las aplicaciones híbridas en el desarrollo de aplicaciones móviles, vamos a crear nuestro primer proyecto con React Native y Expo utilizando Expo CLI.
Lo primero que debemos hacer es tener instalado Node.js, para ello simplemente descarga el ejecutable desde su página. Una vez tengamos Node.js instalado en nuestro equipo, simplemente ejecuta el siguiente comando en un terminal.
El comando anterior nos ofrece una variable de entorno en nuestro equipo llamada expo, si la ejecutamos en un terminal veremos lo siguiente
Yo te voy a recomendar la herramienta que yo utilizo para programar aplicaciones con React Native a día de hoy, no sé si será la mejor, todo depende de los gustos, para a mi es la que mejor me funciona y me ayuda a escribir un mejor código. El IDE que utilizo es IntelliJ IDEA que, aunque esté pensado principalmente para Java, es un todo terreno y se mueve como pez en el agua con cualquier cosa que trabaje con JavaScript.
Los productos de JetBrains no son gratuitos, pero tienes una versión gratuita de 30 días para poder probarlos. Debe quedar claro que yo no me llevo ninguna comisión por promocionarlos, pero llevo utilizándolos muchos años para todos mis desarrollos, PHP, JavaScript y Bases de datos y puedo decir que es una de mis mejores inversiones a día de hoy, actualizaciones constantes, mejoras, un IDE rápido para desarrollar y hacer debug y en definitiva, una poderosa herramienta para en este caso desarrollar aplicaciones móviles con React Native y Expo.
Si no te interesa utilizar un IDE de pago con IntelliJ IDEA, siempre puedes utilizar Visual Studio Code o cualquier editor de texto gratuito con el que a través de plugins se acerque lo máximo a lo que es un IDE.
Ya estamos listos para crear un nuevo proyecto con React Native y Expo, así que abre un nuevo terminal y ejecuta el siguiente comando:
Una vez se haya ejecutado el anterior comando veremos en pantalla lo siguiente:
Moviéndonos con las flechas de nuestro teclado podremos seleccionar la opción tabs y pulsando enter se creará un nuevo proyecto con un montón de cosas ya hechas, es la mejor forma de comenzar un proyecto nuevo con React Native y Expo ya que de esta forma no deberemos configurarlo todo desde 0.
Una vez se haya creado nuestro proyecto el terminal nos informará que podemos lanzar nuestra nueva APP utilizando varios comandos:
En este momento ya estarás en disposición de abrir tu proyecto con tu IDE, si todo ha ido bien prodemos ver lo siguiente:
Si tenemos un emulador en nuestra computadora podremos lanzar nuestra APP y poder visualizarla rápidamente, por ejemplo en MAC OS cuando instalamos Xcode ya lo tenemos completamente configurado. Para lanzar nuestra APP para iOS simplemente debemos ejecutar el siguiente comando:
¿Increíble verdad? Ya tenemos nuestra APP corriendo en un emulador, pero… ¿y si no tengo ningún emulador? Expo tiene una solución rápida y fácil para solucionar este problema.
Expo nos ofrece una solución para poder ver nuestros desarrollos en dispositivos físicos, sea en Android o en iOS, para ello simplemente debemos descargar su APP desde la App Store o la Play Store. Una vez la tengamos instalada en nuestro dispositivo podremos abrir el terminal que abrió anteriormente el comando yarn ios para leer el código QR que nos ofrece con Expo Client. Cuando Expo Client lea el código de tu APP automáticamente la instalará en tu dispositivo y cualquier cambio que hagas en tu código actualizará la APP instalada en tu dispositivo.
Te invito a que te suscribas a la plataforma, tenemos varios cursos que te ayudarán a continuar tu aprendizaje con React Native y Expo, desarrollo de nuevas aplicaciones y publicaciones en Play Store y App Store paso a paso con material actualizado.
Además, si eres desarrollador Laravel no te puedes perder el Curso de React Native y Laravel Echo con Laravel Sanctum, aplicaciones en tiempo real, en él aprendemos desde 0 y paso a paso a desarrollar una APP en tiempo real utilizando como Backend Laravel con Socket.IO.
Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más
Quiero hacerme Premium