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