DanteCervantes.com

Primeros pasos con React Native

Publicado por : Dante | 28 diciembre, 2016 | 3:39 am

 

Hola querida audiencia, después de mucho tiempo de no publicar, he decidido volver con este pequeño tutorial sobre React Native.

¿Qué es React Native?

React Native, es un framework desarrollado por Facebook, el cual permite crear aplicaciones para iOS, Android y Windows (este último no es parte del release de Facebook) con Javascript, la comunidad es muy grande y  está creciendo exponencialmente, actualmente (28 de Diciembre del 2016) está en su versión 0.39, esto indica que es una versión beta, sin embargo, he tenido la oportunidad de crear varios proyectos tanto personales como profesionales y no he tenido mayores problemas.

¿En qué se diferencia de otros frameworks para crear aplicaciones con Javascript ?

Una de las más notables y excelente diferencia es que React Native compila las aplicaciones a nivel mucho más bajo que otros, llámese Ionic Framework, Angular, App.js, Ember etc.

Esto es porque React Native, no crea un navegador embebido dentro de la aplicación como lo hacen sus competidores, sino que crea una maquina virtual de Javascript y se comunica con un “puente” hasta el lenguaje nativo, esto hace que el performance de las aplicaciones sea mucho mejor y más estable. A diferencia de Cordova, React Native tarda menos tiempo en hacer el puente entre Javascript y el lenguaje nativo del dispositivo.

¿Cómo lo instalo?

Debes instalar node y watchman

Después instalas el CLI

Creando tu primer proyecto

Para comenzar edita el archivo index.android.js.

Otra gran diferencia es que React Native, se maneja por componentes, un componente, es una pequeña porción de código que puede ser fácilmente reutilizada en otros componentes, así mismo, cada componente puede manejar eventos y propiedades (props).

Un ejemplo de cómo reutilizar un componente en React Native, es un listado; pensemos que necesitamos un listado de usuarios, en html tendríamos que copiar y pegar n veces la cantidad de elementos deseada, o con jQuery crear un ciclo, crear la plantilla (abrir y cerrar comillas) para poder crear nuestro listado, y a veces puede llegar a ser tanto código, que no sabemos en donde estamos.

En cambio, en React Native es más sencillo simplemente hacemos lo siguiente.

Explicación del código

En la linea 1, “importamos” React desde los módulos de node, así mismo extraemos la función “Component” esta sirve para hacerle saber a nuestra clase que hará uso de métodos adicionales, aparte de los que ejecuta React Native por default.

En la linea 2, importamos los componentes de View y Text desde React Native, esto nos permitirá hacer uso de ellos en nuestro componente. (pensemos que <View> es el equivalente a un <div> y el <Text> a un <span> en html,).

En la linea 4 exportamos nuestra clase como un componente, esto sirve para que podamos incluirlo y hacer uso de el en otro componente.

Método render()

Este método es el que por default se ejecuta al “montar” el componente, esto “pinta” el contenido del método que se encuentra dentro del “return”.

Lo mejor de React Native es que por default utiliza el módulo de diseño Flexbox, por lo tanto las sentencias

  • flex
  • flex-direction
  • flex-wrap
  • align-items
  • justify-content
  • etc

están disponibles!

En la linea 6, tenemos un “deconstruct” es un método que nos permite “extraer” ciertas propiedades de un objeto, en este caso el objeto this.props, contendrá la variable name y podremos hacer uso de su contenido.

¿Cómo uso este componente dentro de otro?

Para usar un componente dentro de otro en React Native, es necesario utilizar la palabra reservada import seguida de un alias, después la palabra reservada from y para finalizar la ruta relativa del componente.

Ej.

Como podemos observar el componente Item, recibe dos propiedades, name y lastname, por lo tanto debemos asignar estos en formato string.

¿Cómo puedo evitar copiar y pegar muchas veces el mismo componente?

Muy sencillo, en EcmaScript 6, existen muchas funciones para iterar sobre nuestros objetos, ahora veremos la función map.

Dentro de nuestra función render podemos hacer uso de la palabra reservada this, ya que hace referencia a la misma clase, de igual forma podemos seguir haciendo referencia a la misma clase dentro de una función iterativa siempre y cuando utilicemos la sintaxis lambda (  ()  =>  {} ) o arrow function.

PropTypes

Los PropTypes, es una manera de asignar las propiedades de un componente, entre ellas se encuentran números enteros, cadenas, funciones y objetos, esto nos ayuda a definir cuales son las propiedades del componente que son obligatorias y cuales son opcionales, así mismo se puede definir propiedades por default.

Estas 3 lineas van debajo de la clase, estas lineas harán que nos salte un error, en caso de que alguna de esas propiedades no haya sido asignada.

Propiedades por defecto

Al igual que los propTypes se pueden definir propiedades por defecto, en caso de que no se haya asignado alguno de las mismas que son requeridas.

Estilos

Una de las mejores funciones que ofrece React Native, son los estilos, esto nos ayuda a mejorar la estructura del código y no tener que hacer los tan odiados “estilos en linea”.

Como podemos observar es bastante sencillo de utilizar.

Conclusión

Existen muchas otras funciones en React Native, te invito a que te documentes en el siguiente enlace.

react-native

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales