Tutorial - Aprende React Native – Tutorial de Primeros Pasos

Si estás interesado en el desarrollo de aplicaciones móviles, seguramente hayas escuchado hablar de React Native. En este tutorial, te mostraremos los primeros pasos para que puedas comenzar a crear tus propias aplicaciones móviles con React Native.

Además, si deseas seguir profundizando en el desarrollo de aplicaciones con React Native, ya tienes disponible el curso de la versión más reciente de React Native.

¿Qué es React Native?

React Native es un framework para desarrollar aplicaciones multiplataforma usando únicamente JavaScript. El desarrollo nativo con React Native, está basado en la librería JavaScript: React JS. Una librería creada por Facebook que busca facilitar el desarrollo de aplicaciones web de una sola página.

Introducción a React Native

La creación de aplicaciones a través de React nos permite encapsular cada uno de los componentes que usemos, a parte de facilitar la reutilización a lo largo de toda la aplicación. Actualmente, algunas de las webs que utilizan React JS como librería son Netflix, Airbnb o Feedly.

Tanto React JS como React Native son dos de las tecnologías que más están creciendo y son una gran alternativa al desarrollo nativo (iOS, Android, etc.) Al contrario que otros frameworks, para el desarrollo móvil multiplataforma, como Cordova o Ionic...

React Native no construye una "aplicación web móvil" con una base de HTML5. El resultado final de nuestro desarrollo será una aplicación nativa creada a partir de Swift o Java. Esto nos permite desarrollar nuestra aplicación en una tecnología "sencilla" y accesible como es JavaScript, para posteriormente transformar ese código a lenguaje nativo, mejorando el rendimiento general de nuestros proyectos.

Otra de las características que identifican el desarrollo con React Native es que podemos visualizar nuestra aplicación mientras desarrollamos.** No es necesario compilar** nuestro código con los nuevos cambios que queramos aplicar, ya que simplemente actualizando el simulador con el que estemos trabajando, podemos ver las novedades. Esto nos permite agilizar las tareas de prueba sobre nuestra app.Podemos ejecutar nuevo código sin necesidad de perder el estado en el que se encuentra la aplicación.

Una de las opciones que aporta más potencia al desarrollo con React Native es la posibilidad de combinar el trabajo de componentes desarrollados en JavaScript junto con los desarrollados en Objective C, Swift o Java.

Podemos incluir diferentes librerías nativas o trabajar directamente con código nativo en nuestros proyectos sin que el rendimiento o el desarrollo de los componentes JavaScript se vean afectados.

Instalación en Mac OSX

Para instalar React Native, necesitamos node, ya que implementaremos sentencias npm para gestionar los paquetes de nuestro proyecto. Una manera efectiva de instalar node es a través de Homebrew.

Para instalar Homebrew simplemente deberemos ejecutar la siguiente sentencia en nuestra consola:

/usr/bin/ruby -e "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/master/install](https://raw.githubusercontent.com/Homebrew/install/master/install))"

Nos pedirá nuestra contraseña de usuario y comenzará la instalación. Puede tardar un rato, pero finalmente nos mostrará un mensaje como el siguiente:

Ahora que ya tenemos instalado Homebrew, podremos descargar node con un simple comando:

brew install node

Instalaremos también Watchman que es una herramienta muy útil que gestiona eficientemente los cambios en el sistema de ficheros.

brew install watchman

Si ya tenías instalado node, asegúrate de que tienes una versión posterior a la 8.0.

Finalmente instalaremos con npm el paquete React Native CLI:

npm install -g react-native-cli

Instalación en Windows

Para instalar React Native en Windows, primero debes instalar Node.js y npm. Puedes descargar Node.js desde su sitio web oficial y seguir los pasos para instalarlo en tu equipo. Una vez instalado Node.js, abre la terminal de Windows y ejecuta el siguiente comando para instalar React Native CLI a través de npm:

npm install -g react-native-cli

Instalación en Linux

Para la instalación en Linux, recomendamos seguir las instrucciones oficiales para instalar node en el equipo, ya que dependerá de la distribución GNU/Linux que vayas a usar. Puedes encontrar los pasos aquí.

Una vez lo hayas instalado, simplemente usaremos npm para instalar el paquete React Native CLI.

npm install -g react-native-cli

Expo

Expo es gratuito y sirve para crear aplicaciones para iOS y Android. Ofrece una librería con una gran cantidad y variedad de APIs nativas para iOS y Android.

Permite gestionar los assets de la aplicación, las notificaciones e incluso ofrece la posibilidad de generar el archivo binario para subir el proyecto a la tienda de aplicaciones de cada tecnología.

XDE

XDE es una de las herramientas que ofrece Expo para la generación de proyectos React Native, además de ofrecer consola de debug y sincronizarlo con la aplicación Expo del dispositivo móvil o simulador donde se quiera desplegar. Ofrece una opción de compartir (Share) que sirve para generar un link que mandar a quienes quieran probar la aplicación y un QR para ser escaneado desde la aplicación React en el dispositivo de prueba. Otra de las opciones es la de dispositivo (Device) que nos ofrece la posibilidad de elegir el simulador donde se ejecutará la aplicación.

Es muy útil tener una cuenta EXPO para que se sincronicen las aplicaciones desarrolladas y ejecutadas en XDE Esta es la primera pantalla que podrás ver en XDE. Ofrece la posibilidad de

crear un proyecto de cero

o

cargar uno ya existente.

Si seleccionamos la opción de Crear un Nuevo Proyecto, nos ofrece la posibilidad de crear un proyecto en blanco o uno con navegación por tabs.

Una vez hayamos seleccionado la ruta dónde se va a crear el proyecto y el nombre del mismo, comenzará la creación de un proyecto único para Android e iOS listo para ser desplegado y editado por el desarrollador.

Una vez haya creado el proyecto, el XDE nos mostrará la Interfaz de Usuario que hemos comentado anteriormente. La opción share nos ofrecerá el QR y el Link para desplegar la aplicación en cualquier dispositivo que cuente con la aplicación móvil Expo:

La opción Device mostrará los simuladores en los que se desplegará la app:

Una vez escaneamos el QR o entramos en el link ofrecido por XDE, se generará un bundle de la aplicación y se ejecutará en el dispositivo destino. Todas las trazas serán mostradas por consola. XDE ofrece dos consolas:

• Una consola izquierda que muestra información interna (generación del proyecto, apertura del proyecto, generación del bundle, etc)
• Una consola derecha que muestra los logs que hayamos ido introduciendo en nuestro código, además de avisar de errores y warnings.

Otra de las utilidades que ofrece es la de publicar (Publish) para que la aplicación sea accesible al público. También ofrece gestionar el ámbito donde la aplicación será accesible:

• Tunnel
  • Accesible para cualquiera que tenga el link o escanee el QR
• LAN
  • Accesible únicamente dentro de la red local para aquellas personas que tengan acceso al link o al QR
• LocalHost
  • Disponible únicamente a nivel de máquina local.

La opción de ajustes (el icono del engranaje) nos ofrece la privacidad para el acceso a la aplicación.

Además, nos ofrece la posibilidad de desplegar la aplicación en modo desarrollo (Development Mode) que hará que los logs de las consolas sean más explicativos y exactos. También puede suponer una leve ralentización en la ejecución.

Justo debajo, disponemos de ambas consolas, con la opción de ocultarlas individualmente si fuera necesario. Nos informan del tipo de información que muestra y también del dispositivo que esté conectado en ese momento. En caso de que no haya ninguno sale el aviso de No devices connected.

Cuando escaneamos el QR o entramos en el link compartido, la consola nos mostrará cómo se va generando el bundle (en porcentaje) y finalmente se desplegará en el dispositivo. La consola también nos avisará de que hay un dispositivo conectado (nos mostrará su nombre identificativo).  El dispositivo mostrará una pantalla de carga que cuando llegue al 100% sacará el contenido de la aplicación.

Por defecto, la aplicación generada con XDE tendrá la siguiente forma:

Como habéis podido observar, EXPO facilita mucho la creación de aplicaciones en React Native, pero como veremos más adelante

no es la única manera de crearlas

. En cuanto a la estructura de cualquier proyecto creado desde cero con

Expo XDE

será la siguiente:

El contenido de la aplicación que se ve en el dispositivo se encontraría en el componente principal: App.js.

Aunque esto lo veremos más adelante.

Create-React-Native-App

Create React Native App es una herramienta/solución oficial que ofrece la posibilidad de crear proyectos de React Native de una manera fácil y rápida. Además, te permite no tener que tener instalar y configurar herramientas nativas como XCode o Android Studio. Para poder hacer uso de esta herramienta, la instalaremos de la siguiente manera:

npm install -g create-react-native-app

Create React Native App se apoya en Expo para generar la aplicación desplegable. Con esta librería podremos crear proyectos únicos para Android e iOS con un solo comando:

create-react-native-app holaMundo

El proceso puede tardar un poco, pero una vez haya acabado podremos levantar la aplicación con...

cd holaMundonpm start

Cuando ejecutamos el comando npm start se nos mostrará la manera de desplegar la aplicación en el dispositivo Android o iOS:

El código QR podrá ser escaneado desde la aplicación Expo del dispositivo y también se podrá desplegar a través del link que viene justo debajo.

De la misma manera, si se quiere desplegar en un emulador, se nos ofrece la manera de hacerlo.

La consola será donde podamos ver el proceso de generación del bundle, el despliegue y los logs:

El proceso de build puede tardar un rato, pero una vez esté generado, cualquier cambio se actualizará automáticamente y sin apenas esperas. Cuando la aplicación nativa se haya creado correctamente la consola nos avisará con el siguiente mensaje:

La aplicación básica que nos genera Create React Native App tiene la siguiente forma:

React Native Init

Otra opción es la de crear aplicaciones específicas para cada Sistema Operativo. Es decir, una para Android y otra para iOS, con la intención de aprovechar al máximo el desarrollo nativo. Para ello, React Native ofrece el React Native CLI, que con la siguiente sentencia, nos creará un proyecto que contendrá distintas carpetas. Una para Android y otra para iOS:

react-native init helloworld

Si queremos agilizar el proceso, podemos instalar yarn que es otro gestor de paquetes como npm pero con algunas ventajas como la velocidad de descarga de librerías.

brew install yarn

Cuando el proyecto se haya creado, podremos ejecutar individualmente tanto la aplicación Android, como la aplicación iOS en sus correspondientes emuladores.

Nota Importante

Apple no permite el desarrollo de aplicaciones iOS si no es desde su Entorno de Desarrollo Oficial: XCode que únicamente está disponible para Sistemas Operativos Mac OSX. Se recomienda contar con la última versión de Xcode para realizar este curso si se va a querer desarrollar para iOS. De otra forma, únicamente se podrán probar las aplicaciones Android a través de Simuladores o Dispositivos conectados.

Para ejecutar la aplicación en un emulador, simplemente tendremos que tener un emulador funcionando (alguno que venga en el Android Studio, alguno creado con Genymotion o alguno de Xcode) y ejecutar la siguiente sentencia dentro del proyecto creado:

react-native run-ios

react-native run-android

XCode

XCode es el entorno de desarrollo de Apple, pensado para desarrollar aplicaciones para iPhone, iPad, Apple Watch, Mac o Apple TV. Como hemos explicado antes, se trata de un software exclusivo y muy potente, únicamente disponible para Mac. Dispone de emuladores de prácticamente todos los dispositivos de Apple para ejecutar las aplicaciones desarrolladas.

Para poder usar los emuladores en nuestro desarrollo de React Native, debemos contar con una versión de XCode superior a la 8. Deberemos asegurarnos también de que tenemos activada la última versión de las Herramientas de Línea de Comandos (Command Line Tools). En la siguiente diapositiva se muestra cómo hacerlo.

Iniciaremos nuestro Xcode e iremos a la opción Preferencias:

Seguido, seleccionaremos la pestaña de Locations y nos aseguramos de que en Command Line Tools tenemos la última versión:

Una vez tengamos configurado esto último, podremos ejecutar el comando react-native run-ios. Seguramente tarde cierto tiempo, por lo que una vez iniciado, recomendamos no cerrar el emulador hasta que se deje de trabajar con él. El emulador se iniciará y podremos ver la aplicación.

Si quisiéramos desplegar la aplicación en un dispositivo físico, deberemos tener una cuenta de desarrollador de Apple y desde XCode configurar correctamente la opción de Targets en la pestaña de General. Seguido, deberás seleccionar tu dispositivo en las opciones de dispositivos.

Android Studio

Android Studio es el entorno de desarrollo, oficial, ideal para desarrollar aplicaciones Android. Además, cuenta con emuladores de gran cantidad de dispositivos. Si queremos desplegar nuestras aplicaciones Android en un emulador, usar Android Studio sería una de las opciones más interesantes, aunque después veremos los emuladores de Genymotion.

Antes de poder desplegar la aplicación, deberemos realizar varias instalaciones y configuraciones:

1. Deberemos tener instalado la última versión del

   JDK de Java

2. React Native necesita de la SDK de Android 6.0 (Marshmallow), por lo que debes asegurarte de configurarlo correctamente en la pantalla de bienvenida de Android Studio:

Seleccionamos la Configuración de SDK Manager

Debemos seleccionar Android 6.0 Marshmallow en las SDK Platforms, además de la última versión disponible de Android

Nos aseguramos de que tenemos la versión 23.0.1 y si no, lo marcamos para que se instale. Finalmente, le damos a Apply y confirmamos las instalaciones.

1. Debemos asegurarnos de que tenemos configuradas correctamente las variables de entorno en nuestro sistema. Dependerá de si vas a trabajar con Mac, Windows o Linux.

• ****En el caso de Mac deberás editar el fichero $HOME/.bash_profile añadiendo las siguientes líneas:

export ANDROID_HOME=$HOME/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-tools

Guardamos el fichero desde la consola:

source $HOME/.bash_profile

Puedes comprobar que se han añadido correctamente realizando el comando echo $PATH

• ****En el caso de Windows deberás añadir una variable ANDROID_HOME en tus Variables de Entorno:

El nombre de la Variable: ANDROID_HOME y el valor de la variable:

C:\Users[tu usuario]\AppData\Local\Android\Sdk

• ****En el caso de Linux deberás editar el fichero $HOME/.bash_profile añadiendo las siguientes líneas:

export ANDROID_HOME=$HOME/Android/Sdkexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-tools

Guardamos el fichero desde la consola:

source $HOME/.bash_profile

Puedes comprobar que se han añadido correctamente realizando el comando echo $PATH. El último paso ya consistiría en configurar el dispositivo que vamos a utilizar para probar nuestra aplicación. Si se quiere probar la aplicación en un dispositivo físico, deberemos habilitar el modo debugger USB de nuestro dispositivo.

Ajustes -> Información del Teléfono -> y presionar 7 veces en el Número de Compilación.

Esto activará las opciones del Modo Desarrollador. En ese punto, enchufaremos el dispositivo físico al ordenador por USB y comprobaremos que se encuentra entre los dispositivos conectados con el siguiente comando (en el caso de Windows y Mac, si vas a usar Linux aquí tienes los pasos previos a seguir):

adb devices

Si, por el contrario, queremos usar un simulador de los que cuenta Android Studio, deberemos gestionar los llamados AVDs. Tendremos que crear un simulador, escogiendo el tipo

Ejecutamos (dándole al play) el emulador que más se adapte a nuestras necesidades para tenerlo listo para desplegar la aplicación

Una vez tengamos configurado nuestro simulador o nuestro dispositivo físico ya podremos realizar el comando react-native run-android para lanzar la aplicación.

Emuladores con Genymotion

Una alternativa cada vez más de moda es la del uso de los Emuladores que ofrece Genymotion. En los últimos años se ha considerado como una de las mejores opciones de emulación de dispositivos Android. Puedes descargar la versión de prueba aquí aunque antes te pedirá que te registres. Ofrece tanto versión para Mac, como para Windows o Linux.

vir

Crear un simulador en Genymotion es realmente fácil, además de contar con una gran variedad de dispositivos virtuales. Necesitarás tener instalado VirtualBox en tu sistema para poder hacer uso de Genymotion.

Iniciaremos la aplicación y nos mostrará una interfaz de usuario sencilla e intuitiva como la siguiente:

Seguido se elegir añadir un dispositivo virtual, podremos elegir el que más se ajuste a nuestras necesidades.

Un buen simulador, no sólo por actual, sino por tamaño, es el Samsung Galaxy S8:

A continuación, vamos completando los pasos que nos pide el proceso de creación:

Cuando ya haya acabado el proceso, se nos listará el simulador en nuestra ventana principal de Genymotion:

Ahora únicamente falta ejecutarlo y ponerlo en marcha:

Una vez haya acabado de iniciarlo, que se realiza de forma muy efectiva y rápida, dispondremos de un simulador para nuestras aplicaciones React Native. De la misma manera que hicimos con el simulador de Android Studio, ejecutaremos el comando react-native run-android y automáticamente detectará el emulador de Genymotion y nos desplegará ahí la aplicación.

Estructura de proyectos en React Native

La estructura de un proyecto en React Native se asemeja a la de un proyecto en React tradicional, con algunas diferencias. A continuación, se detallan las carpetas y archivos más importantes:

• node_modules: Esta carpeta contiene todas las dependencias de Node.js y React Native que se utilizan en el proyecto. No es necesario modificar esta carpeta.

• android: Esta carpeta contiene todos los archivos necesarios para compilar la aplicación en Android. Si no se va a compilar la aplicación en Android, no es necesario modificar esta carpeta.

• ios: Esta carpeta contiene todos los archivos necesarios para compilar la aplicación en iOS. Si no se va a compilar la aplicación en iOS, no es necesario modificar esta carpeta.

• index.js: Este archivo es el punto de entrada de la aplicación. Aquí se importan y se utilizan los componentes que conforman la aplicación.

• App.js: Este archivo es el componente principal de la aplicación. Aquí se define la estructura y el contenido de la pantalla principal de la aplicación.

• package.json: Este archivo contiene información sobre el proyecto, como el nombre, la versión y las dependencias.

• babel.config.js: Este archivo contiene la configuración de Babel, que se utiliza para compilar el código de JavaScript y JSX a un formato que pueda ser interpretado por el navegador o por la aplicación móvil.

• metro.config.js: Este archivo contiene la configuración de Metro, que se utiliza para compilar y empaquetar la aplicación.

Es importante tener en cuenta que la estructura de un proyecto en React Native puede variar según la versión de React Native y según las herramientas utilizadas en el proyecto. Sin embargo, la mayoría de los proyectos seguirán una estructura similar a la descrita anteriormente.

Conviértete en experto de React Native

Como has podido ver, React Native es una herramienta poderosa y versátil para el desarrollo de aplicaciones móviles. Si quieres profundizar en tus conocimientos de React Native y aprender a crear aplicaciones móviles profesionales, te invitamos a que eches un vistazo a nuestro curso. En este curso aprenderás todo lo necesario para crear aplicaciones móviles desde cero, desde la instalación de las herramientas necesarias hasta la publicación de la aplicación en la App Store de iOS o la Play Store de Android.

¡No pierdas la oportunidad de convertirte en un experto en el desarrollo de aplicaciones móviles con React Native y apúntate a nuestro curso hoy mismo!