Cómo configurar React Native CLI desde cero

Te ayudamos a configurar React Native CLI desde cero para crear tu primer proyecto utilizando React Native y poder ejecutarlo en los simuladores.

Preparación del entorno

Hay que comenzar recordando que si no se utiliza un ordenador con macOS, no se va a poder ni compilar ni ejecutar nuestro simulador de iPhone, con lo cual, si queremos hacer la prueba en ambos dispositivos, Android e iOS, tenemos que hacerlo desde un Mac.

Por otro lado es necesario tener instalado Node.js, que lo utilizaremos para todo el tema de gestión de dependencias y las herramientas que utilizaremos.

Para Android también tenemos que tener instalada la versión de Java JDK 8, que es la que es compatible actualmente con React Native y el resto de componentes.

También instalaremos Android Studio, el cual ya vendrá con SDK de Android y con el emulador de Android.

Además tendremos que tener instalado Xcode, que nos vendrá con todas las herramientas de compilación de iOS y con el simulador de iPhone.

Finalmente utilizaremos un IDE de programación, en nuestro caso Visual Studio, pero se puede utilizar Visual Studio Code o Atom o el que más os guste.

Proceso de instalación

Con este entorno ya preparado, comenzamos a instalar la dependencia de manera global para React Native CLI, que es lo que utilizaremos para gestionar nuestro proyecto de React Native. Lo hacemos de esta manera:

npm install -g react-native-cli

Una vez que tengamos esta dependencia instalada, vamos a instalar, en el caso de Mac, Watchman, que nos va a facilitar o a mejorar la tarea de gestión de los ficheros que están siendo modificados y que se tienen que actualizar en nuestro dispositivo.

Instalaremos Watchman utilizando Brew, de esta forma:

brew install watchman

Creación del proyecto

Con Watchman instalado ya podemos pasar a crear nuestro proyecto. Lo haremos en la carpeta en la que nos encontramos, y no es necesario tener abierta la carpeta final del proyecto, ya que al inicializarlo se va a crear la misma.

Debemos darle un nombre al proyecto, que a su vez será el nombre de la carpeta. Debe ser un nombre sin guiones ni espacios, por ejemplo rnclitest.

react-native init rnclitest

De esta forma comienzan a crearse todas las carpetas y ficheros, se instalan las dependencias mínimas básicas para ejecutar este esta aplicación de React Native.

Una vez que termine, podemos acceder a esa carpeta y directamente ejecutar en cada uno de nuestros dispositivos, ya que no es necesario realizar una instalación extra de dependencias en un primer momento.

Antes de acceder a dicho elemento, vamos a abrir nuestra aplicación en el editor para ver lo que tiene:

code rnclitest

Mientras tanto, en la ventana anterior, para ejecutar Metro Bundler escribimos esta línea:

react- native start

De esta forma se inicia Metro Bundler, que va a ser el encargado de preparar nuestro JavaScript y enviarlo, ya sea Android o iOS, mientras estemos desarrollando.

Dentro de la misma carpeta pero en una segunda pestaña, desde la cual vamos a lanzar la aplicación a cada uno de los terminales. Esto lo hacemos con los comandos, según el sistema que queramos utilizar. Comenzaremos por Android:

react-native run-android

Comenzamos por ejemplo por Android, con lo que empieza a compilar la parte nativa del proyecto, a preparar toda la aplicación, la va a depositar en nuestro simulador de Android y se va a abrir.

Mientras finaliza el proceso nos vamos a nuestro IDE para ver cómo está distribuido.

Tenemos un fichero de entrada llamado index.js, que es dónde se está registrando el componente de aplicación principal.

Tenemos los típicos archivos package.json y app.json con la configuración de la aplicación. También tenemos el archivo de configuración de Metro y de otros elementos.

Vemos que se han creado dos carpetas separadas, una para Android y otra para iOS, ya que con React Native no vamos a dejar de tener una aplicación nativa, no vamos a dejar de poder tener que tocar configuración o elementos en cada una de las partes nativas.

En estas carpetas es dónde tendremos que modificar la aplicación de Android y la aplicación de iOS.

Volvemos a la otra pantalla, dónde vemos que todo se ha ejecutado satisfactoriamente y en Metro vemos que el proceso de compilación de elementos de Android se ha completado también.

Si queremos hacer lo mismo con nuestro simulador de iPhone, lo hacemos de esta forma:

react-native run-ios

Mientras se completa el proceso, volvemos a nuestro emulador de Android, en el cual se nos indica que podemos agitar el teléfono para acceder al menú de desarrollador.

Como esto no lo podemos hacer en el simulador, lo realizamos pulsando las teclas Command+M, y en el menú de desarrollador que aparece elegimos la opción “Enable Hot Reloading”, que nos va a permitir hacer un cambio en nuestro código y que ese cambio se cargue automáticamente en el terminal.

Esperamos a que la aplicación esté disponible también en nuestro iPhone, para hacer un cambio y ver cómo se cambia en ambos dispositivos.

Una vez terminado el proceso se lanza la aplicación y podemos ver cómo se está iniciando nuestro proceso de desarrollo en iOS, tanto en el simulador como en la terminal.

Al acabar, vemos que la pantalla es la misma que la que teníamos en el otro emulador, pero en este caso para acceder al menú de desarrollador tenemos que pulsar las teclas Command+D. Una vez abierto activamos también “Enable Hot Reloading”.

Volvemos a nuestro panel de desarrollo, y en el archivo App.js vamos a cambiar el texto “Welcome to React Native” por “Bienvenido a React Native”. Guardamos los cambios y vemos que de forma automática se actualizan ambos simuladores al mismo tiempo.

De esta manera, podemos agilizar la manera en la que estamos desarrollando, ya que tenemos una actualización automática.