Primeros Pasos - React Native & Expo

"babysteps"

Tiempo de lectura: 20 minutos.

Público objetivo: Desarrolladores.

Nivel:  Básico.

Meta:  Realizar una pequeña aplicación y entender de manera básica el comportamiento de react native en conjunto con Expo .

Fecha publicación: 20 de Noviembre de 2017

Introducción:

React Native es un Framework Opensource enfocado al desarrollo móvil  anunciado por Facebook en el año 2015, desde entonces la comunidad no ha parado de crecer, teniendo una fuerte actividad en github ( 56.000 stars, 531 Pull Request, 13.017 Forks hasta la fecha) mucho más que otras tecnologías para el desarrollo de aplicaciones móviles no nativas.

Modelo de aplicaciones Nativas - híbridas - Web

React Native abre la posibilidad de trabajar y compilar código de manera nativa, brindando la capacidad de tener un mejor performance outbox frente  a otras soluciones tradicionales (Híbridas) como Ionic, phonegap, Xamarin, entre otras; las cuales trabajan bajo un modelo de Hybrid-Webapp.

 Por qué usar React Native ?

En lo personal y bajo la experiencia de desarrollar pequeñas aplicaciones móviles tanto en código nativo e híbridas, he experimentado el suplicio de afrontar proyectos para plataformas como android o ios (el último con más odio...). A continuación nombraré dolores de cabeza genéricos:

• Tener que emular (ó simular) cada app (si no tienes un smartphone dado el caso) para sólo ver pequeño cambio en la lógica de tu aplicación.
• Disponer de una computadora con buenas características debido a la instalación IDE’s como Android Studio o Xcode IDE.
  
• IOS te pide disponer si o si de una computadora MAC para poder desarrollar y exportar tu app a iPA.
• Saber objetive-C, Java, C# para poder dar con los diferentes OS.
• Gastar tiempo en configuraciones para cada lenguaje, SDKs, IDEs, etc...

Lo anterior NO DEBE ser algo que gaste nuestro tiempo y esfuerzo. Por suerte, React Native nos permite trabajar bajo ambientes mucho más factibles. He aquí algunas ventajas para no dar espera a usarlo:

• Performance: Al usar Componentes de UI nativos de cada plataforma y no un Webview para renderizar, el desempeño de la aplicación mejora considerablemente.
• Familiar: Quienes programen aplicativos web con React JS les resultará muy fácil familiarizarse con este framework.
• Modularidad: Como en React, los Componentes desarrollados pueden ser altamente reutilizables.
• Integración: Al sólo utilizar el intérprete de JavaScript y componentes de UI nativos, se facilita la utilización de código nativo (Swift, Java, etc.).
• Presentación: React Native dispone de varios clientes (Como Expo - ver más adelante) que facilitan el testeo en un dispositivo físico. Probar aplicaciones se convierte en un proceso fácil el cual consiste en descargar el cliente (Expo) y escanear un código QR para poder disfrutar de nuesta app en cualquier dispositivo móvil, sin necesidad de compilar (ios - android - windows ) y en tiempo “real”, siendo posible ver cambios instantáneamente.
• Todoterreno: Un editor de texto, una terminal y ya está!.
• Compatibilidad: Soporte para una amplia gama versiones de sistemas operativos >= Android 4.1 (API 16) y >= iOS 7.0.

Expo:

Explicado de manera breve, expo, es un sdk escrito en react native, el cual posee caracteristicas predefinidas que permiten ahorrar tiempo en el proceso de codificación.

Por qué usar Expo ?

¿ Por qué no ?. Sí aún te preguntas, acá va un buen motivo:

* Expo permite testear aplicaciones de manera rápida (web, local), incluso editar tus aplicaciones desde la web.

* Expo posee funcionalidades ya construidas de las que podemos disponer en cualquier momento (te da tiempo para embriagarte los viernes en la noche).

* Generación de APK e IPA en la nube (así es, ya no necesitas tener mac para generar archivos IPA, disponer de una pc con buenas especificaciones técnicas o configurar ambientes de desarrollo para esto).

* Piensa sólo en javascript (un lenguaje, múltiples plataformas).

Ahora sí,

• Requisitos:

• Nodejs  - NPM
• Exponet CLI (npm install exp --global)
• Exponet Client ( PlayStore && AppStore)
• (Opcional) Yarn (npm install -g yarn)

Nota: los siguientes comandos son ejecutados en ubuntu.

Ahora, en la terminal:

$ exp init hello-word
$ cd hello-word
$ exp start

Y ya está!, sí, muy impresionante, ¿ no ?. Ahora explicaremos, la estructura de proyecto creada:  

Explicando app.js:  

import React from 'react'

import { StyleSheet, Text, View } from 'react-native'

 Imports: Importamos los componentes nativos necesarios para que nuestra app funcione.

• React
• View: unidad básica y la más importante de las aplicaciones en react native; equivalente al div en html, se puede usar como contenedor de otros componentes.

  <View style={styles.container}>

  
  

  Podemos usar inline styles si lo desamos:

  <View style={{flex:1, backgroundColor: 'red'}}>​

• Text: Componente diseñado para mostrar texto en pantalla.

  <Text>Hi!! Que way :O!! </Text>

• Stylesheet: Abstracción similar a los estilos CSS, es importante resaltar que son objetos javascript . También, que React Native usa flexbox principalmente para su layout (diseño).

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

Para ver información más concisa o revisar el código fuente de este artículo revisa mi repositorio!:

https://github.com/NoRoboto/react-native/tree/master/expo-hello-app/hello-word

Muchas gracias, pronto más updates!, hasta la próxima Geeks!.

Autor: Daniel Diaz Giraldo - Full stack developer, React Native Developer.

Cantante y empático colombiano. Ingeniero en Elemental Lab  

Referencias:

Ventajas react native Carlos Álvaro González - GIT