R E AC T N AT I V E

P R O G R A M A C I Ó N M Ó V I L M U L T I P L A T A F O R M A N A T I V A

M . C . H O R A C I O A U G U S T O N A V A R R O G A R C Í A
¿Qué es?

React Native es un framework para el desarrollo de aplicaciones multiplataforma utilizando únicamente Javascript.
El desarrollo nativo de React Native esta basado en React JS, una librería creada por Facebook enfocada en
facilitar el desarrollo de aplicaciones web de una sola página.

React Native es como React, pero utiliza componentes nativos en lugar de componentes web para construir bloques.
Para entender la estructura básica de una aplicación React Native, es necesario entender algunos conceptos básicos
de React, como son los componentes, JSX (Javascript+XML), estados (state) y propiedades (props). Aún si ya conoces
React es necesario aprender sobre algunas cosas básicas de React Native.
¿React?

La creación de aplicaciones a través de React permite encapsular cada componente que se utilice, además de
facilitar la reutilización de código a lo largo de la aplicación. Actualmente algunas web que utilizan React JS son
Netflix, Airbnb o Feedly.

Tanto React como React Native son dos tecnologías con un crecimiento significativo y son una gran alternativa al
desarrollo nativo para desarrollo móvil ya sea para Android o IOS.

React Native no construye una aplicación web móvil en base a HTML5 como puede suceder con un sitio web
responsivo. El resultado final de un desarrollo en React Native es una aplicación nativa creada a partir de Swift o
Java.
Características

Utilizamos Javascript como tecnología de desarrollo tenemos acceso a una herramientas “sencilla” y accesible, para
posteriormente transformar ese código a lenguaje nativo Android o IOS.

También podremos visualizar nuestra aplicación al momento de desarrollarla sin la necesidad de estar compilando
el código lo que repercute en velocidad de desarrollo.

Además podemos combinar los componentes desarrollados en Javascript con los desarrollados en Objective C, Swift
o Java.

Finalmente tenemos la posibilidad de incluir librerías nativas o trabajar con código nativo en nuestros proyectos sin
que el rendimiento se vea afectado.
R E AC T J S
EL FRAMEWORK BASE PARA REACT NATIVE
¿Qué es?

React JS es una librería de Javascript creada por Facebook, que se encarga de crear la UI, es decir, la V del
modelo MVC (modelo vista controlador). React JS al ser una librería, necesitaremos importar módulos de terceros
para poder gestionar temas de enrutamiento, DOM (document object model), entre otros.

React JS busca un proceso de desarrollo simple y huir de la magia que tienen otros frameworks. React JS nos
permite un mayor control de los datos, descargar el DOM real del navegador y saber qué ocurre en todo momento.
Componentes

En React lo más importante son los componentes, pequeños snippets de código reusable que combinados entre sí, nos
permiten construir la aplicación deseada. Con ellos, logramos que el código esté encapsulado por
conceptos/objetivos y nos da facilidad de implementar pruebas en nuestra aplicación.

Los componentes tienen dos tipos de propiedades, las props y los states. Ambos nos permiten manejar la
información en los componentes. La diferencia principal entre ambos, es que los props (propiedades) se encargan
de pasar información entre componentes; y los state (propiedades) se encargan de manejar información dentro
del componente.
Para gestionar el ciclo de vida de los componentes, React JS nos proporciona un conjunto de eventos donde
podremos controlar cuándo ha sido dibujado un componente, o cuando va a ser dibujado; o también cuando se ha
cambiado el valor de una propiedad o state, entre otros.

Con estos eventos, podremos manejar el Virtual DOM, controlar el estado de un componente e integrar plugins de
terceros (por ejemplo, si pensamos en un carrusel, al dibujar el componente daremos al play este empezará a
mostrar las imágenes).
JSX y virtual DOM

JSX (Javascript sintax extension) es Javascript + XML que se compila dentro del componente. Ahora es preferible
tener todo en capsulado en un solo archivo en lugar de separar el HTML y el JS archivos distintos; esto hace que
mantenerlo sea más fácil además de poder identificar qué hace cada componente.

El Virtual DOM es una copia del DOM real del navegador que agiliza las modificaciones; cuando un componente
cambia de propiedad y/o estado, este se encarga de modificar solamente los nodos del DOM real que deben ser
modificados. El problema que hay en otros frameworks es que afectan directamente el DOM real, y cada
modificación es una de las causas por las que a veces las aplicaciones web van lentas.
¿Por qué React Native?

React Native traduce nuestro JSX en elementos nativos de la plataforma final, por tanto tendremos una aplicación
nativa con comportamiento, interfaz y animaciones nativas del sistema. Cabe destacar, que si quisiéramos,
podríamos abrir los proyectos en XCode o Android Studio.

React Native usa JSX para definir las interfaces e internamente transpila el código Javascript a las APIs de
Objective C o Java, para dibujar componentes utilizando el mismo motor nativo sin tener que utilizar webviews;
además React Native, puede acceder a APIS del sistema como la cámara o gps por ejemplo.

Transpilar: Traducción de un lenguaje fuente a otro fuente de un nivel de abstracción parecido. Por ejemplo de un
lenguaje de alto nivel a otro lenguaje de alto nivel.

Es un proceso parecido a la compilación, pero en esta se traduce de un lenguaje de alto nivel a lenguaje maquina
generalmente.
REQUISITOS
LO NECESARIO PARA CREAR APLICACIONES EN REACT NATIVE
TRABAJANDO DE FORMA LOCAL
Node.js

Ideado como un entorno de ejecución de JavaScript orientado a eventos asíncronos, Node.js está diseñado para
crear aplicaciones network escalables que esta construido con el motor de JavaScript V8 de Chrome.

Sitio oficial
https://nodejs.org/es/

Enlace para descargas

https://nodejs.org/es/download/

Tutorial de instalación Linux, IOS y Windows (inglés)

https://www.tutorialspoint.com/nodejs/nodejs_environment_setup.htm

Traductor de Google
https://translate.google.com/?hl=es
Una vez que descargamos de la página oficial el instalador correspondiente para el sistema operativo y
arquitectura, procedemos a instalar Node.js.

Es importante durante la instalación de Node.js seleccionar todas las opciones, al terminar de instalar Node.js
preguntará por la posible instalación de Chocolatey, esta herramienta no es necesaria.
npm
Npm es el administrador de paquetes para la plataforma Node.js. Coloca los módulos en el lugar donde node los
puede encontrar y administra los conflictos de dependencia de forma inteligente. Es extremadamente configurable
y soporta una gran variedad de casos de uso. Comúnmente se utiliza para publicar, descubrir, instalar y desarrollar
programas en Node.js.

Nota: npm es instalado de forma automática al instalar Node.js, lo podemos comprobar al abrir una ventana de
línea de comandos de Node.js.
create-react-native-app
Crea aplicaciones React Native universales sin configuración para su construcción, es decir, neutras entre IOS y
Android. Para instalarlo, una vez que se instalo npm, abrimos una ventana de línea de comandos Node.js y
escribimos el siguiente comando:

npm install -g create-react-native-app

* Requiere conexión a internet
JDK 8
Java Development Kit, el kit de desarrollo del lenguaje Java de Oracle mínimo versión 8.

Enlace para descargas

https://www.oracle.com/mx/java/technologies/javase/javase-jdk8-downloads.html
Creando un proyecto

Una vez que tenemos instalado

• Node.js
• npm
• create-react-native-app
• JDK 8

Podremos crear nuestro primero proyecto; deberás navegar en una ventana de línea de comandos de Node.js hasta
la carpeta donde deseas crearlo y ejecutar el siguiente comando:

create-react-native-app MyReactNative
 create-react-native-app MyReactNative

De forma automática se creará la carpeta del proyecto con su estructura y sus archivos.

Con un editor de código podremos editar

los archivos fuentes sugerimos

Visualstudio code
https://code.visualstudio.com/download

Sublime text 3
https://www.sublimetext.com/3
Si abrimos el proyecto con sublime y editamos el archivo App.js debemos ver lo siguiente:
TRABAJANDO EN LÍNEA
Editores React Native

También tenemos una variedad de editores en línea para crear aplicaciones en línea.

Snack de Expo
Permite probar la aplicación desde la web en IOS o Android y probar en un dispositivo vía Expo
https://snack.expo.io/

Permiten crear las aplicaciones, probarlas en la web y descargar el proyecto

Code sandbox
https://codesandbox.io/s/q4qymyp2l6

Appitr
https://appitr.com/

BuilderX (Vista diseño)

https://builderx.io/login
HACIENDO PRUEBAS
Expo

Expo es una plataforma open-source para crear y probar aplicaciones universales nativas para IOS, Android y la
web.

Hay dos herramientas necesarias para desarrollar aplicaciones con Expo: una aplicación de línea de comandos
llamada Expo CLI que inicializa y provee al proyecto; y una aplicación móvil llamada Expo que es utilizada para
las aplicaciones en IOS o Android. Cualquier navegador de internet sirve para abrir el proyecto en la web.

Sitio oficial
https://expo.io/

Se puede obtener el cliente para los dispositivos en sus respectivas plataformas

Android - https://play.google.com/store/
IOS - https://www.apple.com/mx/app-store/
expo-cli

Es la interfaz principal entre el desarrollador y las herramientas Expo. Además de la línea de comandos tiene una
GUI basada en web que se abre en el navegador cuando iniciamos el proyecto. Es posible utilizar esta GUI en
lugar de la línea de comandos, ambas tienen funciones similares.

Para instalar expo-cli debemos abrir una ventana de línea de comandos de Node.js, y tecleamos la siguiente
instrucción:

npm install --global expo-cli

Nota: Es necesario tener instalado Node.js

*Se requiere internet para su instalación

Una vez que termina el proceso podemos verificar la instalación tecleando el siguiente comando:

expo whoami

Si la instalación se realizó correctamente debemos recibir un error que indica que no hemos iniciado sesión.

Podemos crear una cuenta en Expo ejecutando el comando expo register o registrándonos en el sitio oficial. Si se
cuenta con una cuenta se puede iniciar sesión con el comando expo login, aún cuando no es necesario una cuenta
para empezar a desarrollar es recomendable crear una cuenta ya que esto facilitará el acceso a los proyectos en
desarrollo mostrándolos de forma automática en la pestaña Projects.
App Expo

No es necesario contar con IOS para crear una aplicación para esa plataforma; solo se necesita un dispositivo con
IOS y la app Expo instalado para probarla. De igual manera sucede con los dispositivos Android, pudiendo
desarrollar desde cualquier plataforma para cualquier plataforma.
Formas de trabajo
Local

web
CREANDO NUESTRA SEGUNDA APLICACIÓN
Hola mundo - 1

Vamos a crear nuestra primer aplicación utilizando nuestro entorno local, es necesario recordar que debemos de
tener instalado: Node.js, npm, create-react-native-app, JDK 8 y expo-cli; además de la app Expo en un dispositivo
Android o IOS.

Lo primero que haremos será inicializar al aplicación; en una terminal de línea de comandos de Node.js escribimos
los siguientes comandos:

Creamos una aplicación llamada my-app. Seleccionamos la plantilla en blanco cuando aparezca.
expo init my-app

Navegamos hasta la carpeta del proyecto

cd my-app

* Puede que necesite conexión a internet

Una vez que se inicializa el proyecto nos aparecerá las opciones para ejecutarlo.

Es importante mencionar que el proyecto se crea en la carpeta actual, por lo que es importante desde la línea
de comandos situarnos en la carpeta que deseamos crear el proyecto.
Hola mundo - 2

Como segundo paso vamos a iniciar el servidor de desarrollo con el siguiente comando en la misma ventana.

expo start

Al ejecutar este comando o npm start, expo-cli inicia Metro Bundler que es un servidor HTTP que compila el código
Javascript de nuestra aplicación utilizando Babel y lo proporciona a la app Expo. Además nos aparecerá las
herramientas de desarrollo de Expo (Expo Dev Tools) la interfaz gráfica de expo-cli.
Hola mundo - 3
En este punto ya podemos probar nuestra
aplicación en blanco en distintos dispositivos
al mismo tiempo escaneando el código QR
que aparece en el entorno gráfico y en la
ventana de línea de comandos.

Una vez escaneado el código al editar y

guardar se actualiza automáticamente el
dispositivo.

En caso de que se desconecte basta con

actualizar en el dispositivo y de forma
automática se conecta y actualiza.
Veamos de forma detallada las posibilidades que tenemos para realizar las
pruebas.

En el apartado Connection tenemos las opciones Tunnel, LAN y Local.

Por defecto esta seleccionado LAN y ahí debería de funcionar, pero dependemos de
la configuración de nuestro modem – ruteador. Aún cuando nuestro equipo funciona
como un servidor local, la mayor parte del tiempo nuestro modem – ruteador no esta
configurado para dirigir las peticiones HTTP a nuestro equipo; por lo que casi seguro
fallará. Es necesario configurar el modem – ruteador para que funcione.

La opción Tunnel establece una VPN que funcionará, pero es importante mencionar
que trabaja más lento que la opción LAN.

La opción Local se utilizaría en caso de usar un emulador.

El cambio del código QR es visible al cambiar de opción.

EDITANDO NUESTRA APLICACIÓN
Hola mundo - editando
Si abrimos el proyecto con sublime y editamos el archivo App.js debemos ver lo siguiente:
Para realizar el primer cambio a nuestra aplicación debemos abrir el archivo App.js con un editor de código.

En nuestro caso, cambiamos el texto “Open up App.js to start working on your app!” por “Hola mundo”; guardamos
los cambios y actualizamos nuestro dispositivo, en caso de que no se actualice.

Documentación oficial de React Native

https://reactnative.dev/docs/getting-started
Hemos creado nuestra primer aplicación Rect Native !!!