Expo y React Native, primeros pasos para crear aplicaciones

1

SEPTIEMBRE, 2019

Expo es una herramienta para el desarrollo con React Native, un framework desarrollado por Google que combina lo mejor del desarrollo nativo con React, una de las mejores librerías para la creación de Interfaces de Usuario.

Si ya has trabajado con React, te resultará bastante cómodo desarrollar aplicaciones para móviles con este framework. Y más utilizando esta herramienta que agilizará el desarrollo permitiendo emular tu aplicación tanto en tu propio dispositivo como en un simulador.

Menus de DIVI personalizados

NOTA: El desarrollo con esta herramienta agilizará el aprendizaje, pero hará que nuestras aplicaciones ocupen mucho espacio. En otro post explicaré cómo pasar esa aplicación a un proyecto creado directamente con el CLI de React Native.

"React Native permite el derrollo para Android, IOS y Web"

Cabecera de menus de DIVI

Instalar última versión de NodeJS

Primer Paso: Instalación de NodeJS

Lo primero que debemos hacer para preparar nuestro ecosistema es instalar NodeJS, esto nos permitirá instalar y utlizar todos los paquetes y dependencias necesarios. Desde la web de Expo se nos invita a instalar la última versión de éste.

Al instalar NodeJS tambíen se instalará NPM, una herramienta Open Source que nos facilitará la tarea de añadir los paquetes necesarios a nuestro proyecto. Aunque yo te recomiendo instalar también Yarn, otro gestor de dependencias y paquetes que reducirá el tiempo de instalación de dichos paquetes en el desarrollo de nuestro proyecto.

Menus de DIVI con linea

Instalar Expo CLI (Command Line Interface)

Segundo Paso: Instalar el CLI de Expo

El CLI (Command Line Interface), es una herramienta que nos permite usar la línea de comandos de Expo, permitiéndonos crear el paquete y trabajar sobre éste o publicarlo.

Para instalarla debemos abrir la línea de comandos (CMD en Windows). Puedes hacerlo simplemente buscando las siglas «cmd» en el buscador de la barra de tareas o en cortana.

Ahora introduciremos el siguiente comando para instalar el CLI de manera global:

npm install expo-cli –global

Menus de DIVI linea cuadrado

Necesitamos crear un proyecto

Tercer Paso: Crear un proyecto

Para empezar a crear nuestros proyectos con Expo primero deberemos crear una cuenta en Expo.io, lo que nos permitirá entre otras cosas compilar nuestras aplicaciones o colgarlas de manera publica o privada.

Una vez creada nuestra cuenta en Expo, ya podemos proceder a crear nuestro primer proyecto, para ello debemos introducir el comando en el CMD y estando en el directorio que queremos crear el proyecto (ej: C:\Apps\):

expo init nombre-del-proyecto

Nos preguntará si queremos usar una plantilla (template) y nos dará la opción de usar dos tipos de proyectos Managed Workflow, donde el CLI se encarga de configurar la mayoría de las cosas, o Bare Workflow, donde el desarrollador tiene todo el control sobre el desarrollo.

Luego nos pedirá un nombre para nuestra aplicación y también nos aparecerá el slug que es el nombre de la carpeta donde estará nuestro proyecto. Si tenemos Yarn, nos dará la opción de utilizarlo, lo cual agilizará el proceso.

Menus de DIVI con botones colores

Inicia tu proyecto para trabajar en él

Cuarto Paso: Iniciar el proyecto

Una vez creado el proyecto, lo iniciaremos para trabajar en él, para ello debemos entrar en la carpeta de nuestro proyecto introduciendo:

cd nombre-del-proyecto

Y a continuación, para iniciarlo utilizaremos el comando:

expo start

Menus de DIVI con botones sombra

Visualiza tu proyecto con Expo Client

Quinto Paso: Vista previa del proyecto

Una de las ventajas de Expo es la previsualización de nuestro proyecto directamente en nuestro dispositivo utilizando la aplicación Expo Client, disponible en Android e IOS.

Descárgala en tu dispositivo Android o IOS, conecta ambos dispositivos a la misma red (Smartphone y PC) e inicia tu proyecto. Listo ya puedes utilizar tu dispositivo para previsualizar tu aplicación.

Adaptate

Prueba React Native con Snack

Snack: herramienta de Expo online

Expo también pone a nuestra disposición una herramienta online, Snack, para hacer nuestras pruebas directamente sin tener que instalar nada, de manera rápida y sencilla. Además podremos visualizarlo en Android, Ios o Web.

También podremos hacer búsquedas de proyectos públicos y así ver el funcionamiento e integración de los diferentes componentes. Esto es algo que no está de más, sobre todo cuando demos nuestros primeros pasos con Expo y React Native.

Eso es todo de momento, ahora te toca armarte de paciencia y trastear. Recuerda que para empezar a modificar nuestro proyecto debemos abrir el archivo App.js con nuestro editor (Te recomiendo Visual Studio Code o Sublime Text). Mucha suerte.