9/21/2018 Creando nuestra primera app nativa usando React Native | OCTUWEB

(/)

DIA 16 / 2016

Creando nuestra primera

app nativa usando React
Native
por Joan Artés | 24/10/2016

La presencia en el mundo mobile de cualquier proyecto es tan

importante como tener una web. Gracias a React Native
podremos crear apps nativas para iOS y Android fácilmente y
es por esto que en este artículo haremos una pequeña
introducción, explicando qué es y como se estructura un
proyecto con este framework.

El auge del mobile en el mundo de

las nuevas tecnologías
https://octuweb.com/nuestra-primera-app-nativa-react-native/ 1/12
 Si hay algo que no podemos negar hoy en día es que el mobile cada vez va
9/21/2018 Creando nuestra primera app nativa usando React Native | OCTUWEB

tomando más protagonismo en el mundo de las nuevas tecnologías y más en

Internet. Haciendo una simple búsqueda en Google veremos como hay
millares de gráficas con muchos números indicando que el uso del móvil por
parte de los usuarios es cada vez mayor haciendo que estar preparados para
este hecho tome importancia en nuestros negocios. Esto lleva a que la
tecnología también se adapte a ello produciendo que salgan nuevas
soluciones o herramientas como La Web Reponsive. Yendo más allá a nivel
tecnológico podemos observar el nacimiento de nuevos frameworks
orientados al mundo móvil, como Ionic Framework, Titanium o React Native.

React Native: desarrollando apps

nativas usando Javascript
React Native es un framework desarrollado por Facebook que permite
desarrollar apps nativas iOS y Android usando Javascript. Sí, has leído bien,
apps nativas usando Javascript, sin Objective-C o Java de por medio. ¿Pero
dónde está el truco? React Native lleva como un “puente” donde su función es
la de traducir el código React Native en Objective-C, para el caso de iOS, y Java
en Android. Es algo mágico que permite a los programadores web poder
desarrollar apps nativas sin tener que aprender nuevos lenguajes de
programación muy específicos para cada una de las plataformas. A parte que
la sintaxis de React Native es bastante clara y sencilla, además de heredar el
mismo diseño que React, aportando flexibilidad y reaprovechamiento en el
código. Faltaría añadir por último que el código fuente que desarrollemos, en
nuestra primera app, será un 100% compartido con iOS y Android. Esto quiere
decir que el código Javascript que hagamos nos servirá tanto para la app en
iOS como en Android.

Primeros pasos
https://octuweb.com/nuestra-primera-app-nativa-react-native/ 2/12
 Antes de picar cualquier tecla tendremos que preparar el entorno para poder
9/21/2018 Creando nuestra primera app nativa usando React Native | OCTUWEB

hacer nuestra primera app (en esta guía trabajaremos el ejemplo con la app
iOS en Mac):

Instalar Xcode
Para poder simular la app iOS necesitaremos el software de desarrollo de
Apple, Xcode (https://itunes.apple.com/es/app/xcode/id497799835?mt=12).
Solamente vamos a usar el simulador iOS que lleva integrado para poder abrir
y trastear con nuestra app.

Instalar node
En Mac se puede instarlo sin problemas usando Homebrew (http://brew.sh/)
sin tener que bajarlo manualmente y instalarlo, ya que este último
procedimiento normalmente da problemas. El comando para instalar node
sería:

bew install node

Instalar React Native

Una vez tengamos node instalado en nuestro ordenador podremos instalar
React Native lanzando el siguiente comando el la terminal:

npm install -g react-native-cli

https://octuweb.com/nuestra-primera-app-nativa-react-native/ 3/12
 Inicializar la app en React Native
9/21/2018 Creando nuestra primera app nativa usando React Native | OCTUWEB

Ahora que ya tenemos todo el entorno preparado para poder empezar a

programar nuestra primera app con React Native, iremos otra vez a la
terminal y nos situaremos en una carpeta donde queramos color el código
fuente del proyecto y ejecutaremos el siguiente comando, donde le decimos a
React Native que inicie un nuevo proyecto con el nombre de octuweb:

react-native init octuweb

https://octuweb.com/nuestra-primera-app-nativa-react-native/ 4/12
 Estructura de cheros y carpetas
9/21/2018 Creando nuestra primera app nativa usando React Native | OCTUWEB

del código de nuestra app

Después de esperar un buen rato y de ver unos cuantos mensajes en la
terminal podemos observar que React Native ha creado una carpeta llamada
octuweb que contiene todos los ficheros necesarios para desarrollar la app.
También vemos que los últimos dos mensajes que ha dejado React Native en
la terminal ya nos dice como abrir nuestra app con el simulador pero esto lo
veremos más adelante. Centrémonos en la estructura de los ficheros del
proyecto:

Como podemos observar, tenemos cuatro carpetas y varios ficheros.

Claramente, la primera carpeta __test__ son para temas de testing. Las dos
siguientes carpetas, android y ios, son las carpetas que contienen los ficheros
“nativos” de nuestra app en cada una de las plataformas. No nos harán falta
para nada. El último directorio, node_modules, es donde se guardan las
diferentes librerías necesarias que usa nuestra app.

https://octuweb.com/nuestra-primera-app-nativa-react-native/ 5/12
 ¿Y dónde está el código fuente (en Javascript) de nuestra app? Pues
9/21/2018 Creando nuestra primera app nativa usando React Native | OCTUWEB

en index.ios.js y en index.android.js. Estos dos ficheros contienen el código

fuente de nuestra app, uno para iOS y otro para Android. Y lo bueno de React
Native es que si no se usan módulos específicos de cada plataforma (por
ejemplo el DatePicker de iOS (https://facebook.github.io/react-
native/docs/datepickerios.html)) el código fuente de los dos ficheros puede
ser el mismo sin problema.

Entendiendo el esqueleto
de index.ios.js
Iremos destripando poco a poco el fichero de la app hasta entender los
diferentes bloques que la componen:

import React, { Component } from 'react';

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

Este primer bloque de código que encontramos simplemente importa el

componente principal, React, y luego los diferentes componentes que se van a
usar en la app: AppRegistry , para registrar la app en el proyecto; StyleSheet ,
para dar estilos a las vistas usando pseudocss; Text , es la etiqueta para
insertar texto; View , para declarar una vista.

export default class octuweb extends Component {

  render() {
https://octuweb.com/nuestra-primera-app-nativa-react-native/ 6/12
9/21/2018
    return ( Creando nuestra primera app nativa usando React Native | OCTUWEB

      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

En este bloque de código se define el componente principal de la app,

octuweb. El método principal es render() en el cual se usa para renderizar
el código en la app. En este método encontramos la etiqueta  <View> que se
encarga de agrupar las diferentes etiquetas de texto <Text> . Ambas etiquetas
aceptan el atributo  style en el cual podemos pasar la referencia de los estilos
escritos en pseudocss que veremos a continuación:

const styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
https://octuweb.com/nuestra-primera-app-nativa-react-native/ 7/12
9/21/2018
    textAlign: 'center', Creando nuestra primera app nativa usando React Native | OCTUWEB

    color: '#333333',
    marginBottom: 5,
  },
});

Se declara una variable  styles del tipo un objeto  StyleSheet (recordemos

que lo hemos importado el principio del fichero) y en este se va definiendo
cada una de las propiedades deseadas. En este caso, tres: container ,
welcome y instructions . Luego en las etiquetas de más arriba se hace
referencia a cada una de ellas usando la notación {styles.container} por
ejemplo.

AppRegistry.registerComponent('octuweb', () =&gt; octuweb);

Finalmente se registra la app para que React Native sepa que “octuweb” es la
componente principal.

Arrancando nuestra app en el

simulador
Ya vista la estructura básica de una app en React Native iremos a la terminal y
ejecutaremos el siguiente comando:

react-native run-ios

https://octuweb.com/nuestra-primera-app-nativa-react-native/ 8/12
9/21/2018
A partir de este momento React Native empezará a compilar la app para iOS
Creando nuestra primera app nativa usando React Native | OCTUWEB

pasando por diferentes procesos que podremos ver por la terminal. Una vez
termine todo este largo proceso se nos abrirá la app en el simulador iOS de
Xcode:

https://octuweb.com/nuestra-primera-app-nativa-react-native/ 9/12
9/21/2018
Os animo a ir cambiandoCreando
el código fuente de la app para poder ir jugando con
nuestra primera app nativa usando React Native | OCTUWEB

ella y veréis que programar con React Native no es muy complicado gracias a
que la documentación (https://facebook.github.io/react-native/) está bastante
bien.

   

Joan Artés

Organizador de Meetups y WordCamps de la comunidad

WordPress en Barcelona. Trabaja en 
Artesans (http://www.artesans.eu/) by Omitsis como
WordPress Captain desarrollando grandes proyectos web
usando WordPress. A veces dice algo interesante en su blog 
joanartes.com (https://www.joanartes.com/) y los días impares
que hace sol twittea.

@Joan_Artes (https://twitter.com/Joan_Artes)

www.joanartes.com (https://www.joanartes.com/)

https://octuweb.com/nuestra-primera-app-nativa-react-native/ 10/12