Hablemos de React-Native

React Native, qué es y cómo funciona.

En nuestros tiempos todos queremos crear una aplicación para nuestros dispositivos móviles, y más de uno ha desistido cuando nos dimos cuenta de todo lo que implicaba, si queríamos que la aplicación funcionará tanto en Android como en IOS, teníamos que repetir el código de una en la otra, y más de una ocasión terminábamos rompiendo algo de la aplicación, además agreguemos las horas y horas que hemos pasado compilando para poder probar nuestros cambios en alguna vista. Si utilizan Android Studio tal vez sepan de lo que estoy hablando y mucho más si utilizan Xamarin para Visual Studio, el infierno puede llegar a ser peor.

Bien se dice que Javascript fue el lenguaje que pasó desapercibido por un tiempo, pero después de que llegó Node con el motor V8, ese mismo que utiliza Chrome, es demasiado el auge que ha tomado en el último año, y se puede decir sin temor a equivocarse que Javascript es el lenguaje obligatorio de la web, y aunque lo siguiente que les contaré les puede sonar raro y extraño, no sólo se puede utilizar en la web, ¿qué pasaría si les dijera que pueden crear su propia aplicación web nativa con Javascript?, ¿cómo se sentiría si las horas y horas de espera y planeación serían menos si empiezan a crearlas con Javascript?

Pues si, ahora ya es posible hacer y para eso sirve React Navite.

Dejénme explicarle un poco de cómo funciona, normalmente cuando creamos una aplicación nativa, principalmente nos preocupamos por su Interfaz de Usuario (UI), por que es la parte más vistoza, y la primera impresión para nuestro cliente o clientes, igual de importante debe ser nuestra lógica de negocios. Ahora muchos de nosotros utilizamos un embebido de una vista (como utilizar Apache Córdova) que nos permite utilizar HTML, Javascript y CSS, una aplicación híbrida, o simplemente desarrollamos con plataformas nativas (Swift para IOS, Android Studios para Android o Xamarin para ambas) en más de una ocasión en cada una de ellas se nos presentan distintos problemas, que al final terminan alargando el desarrollo de la aplicación.

Pues bien, cuando utilizamos React Native, estamos utilizando cómo lenguaje principal, Javascript, y una sintaxis exclusiva de React conocida como JSX. Expliquemos un poco más de JSX.

JSX extiende Javascript, y nos permite crear y utilizar etiquetas XML, he aquí un ejemplo:

import React from 'react'

class MyComponent extends React.Component{

 render(){

  return (
   <div>
    Contenido
   </div>
  ) 

 }

}  

Y despues requerir a ese componente en una instancia de la siguiente forma: 

import React from 'react'

import MyComponent from 'MyComponent'

class Root extends React.Component{

 render(){
   <div>  
    <MyComponent/>
   </div>

 }

}
Internamente React lo que hace es transpilar ese código en algo que pueda ser entendido por el navegador y así crear un componente que sea reutilizable, React Native funciona de la misma forma, utiliza la misma sintaxis JSX y requiere los módulos de la misma forma, así que trabajar con React Native, no será tan diferente de ReactJS.

El enfoque de React Native, radica en utilizar un sólo código y que esté pueda funcionar en cualquier dispositivo móvil. Esta es la verdadera potencia, y por si fuera poco podemos realizar nuestros propios módulos nativos y requerirlos en React cómo si estuvieramos importando un módulo cualquiera.

Algo asi: 

En ES5:
 var modulo = require('Nombre del modulo')

En ES6
 import modulo from 'Nombre del modulo'

Ahora, cuando desarrollamos nativamente necesitamos de un compilador para realizar cambios y adecuaciones al código.

Si quieren ver un ejemplo, den click aquí y prueben a editar el cuadro de la izquierda.

Además en el momento de desarrollar las aplicaciones, contamos con un visualizador, es decir, podemos apreciar en tiempo real, cómo se está formando nuestra aplicación, tal cómo presionar el botón de guardar y React se encarga de renderizar nuevamente la vista, sólo compilamos el archivo una sola vez y listo. Y por si fuera poco contamos con herramientas y plugins para navegadores, las llamadas ReactTools, disponibles para la mayoría de estos.

Sabemos que React ha tenido el auge esperado, sobre todo porque es utilizado por Facebook, una empresa consolidada, y que además prueba su rendimiento con una inmensa concurrencia y múltiples usuarios conectados. Y por supuesto hace también lo suyo con React Native.

Configurar un entorno de desarrollo es demasiado sencillo, en el siguiente post, explicaremos a fondo cómo integrar un entorno de desarrollo para comenzar con nuestra aplicación nativa.

Muchas gracias y nos vemos en el próximo post