• Alex Tarragó

React Native, una tecnología a tener en cuenta.

Actualizado: oct 13

Hoy hablaremos de React Native, una tecnología web basada en javascript destinada al desarrollo de apps nativas.

Como ya sabes, actualmente, las dos principales vías de desarrollo de apps para iOS y Android son:

  1. Desarrollo nativo (Swift, Objective-C, Java, Kotlin, …)

  2. Desarrollo de web-apps o apps híbridas (Ionic 2, PhoneGap, …)

El desarrollo nativo se basa en programar de forma independiente cada una de las apps para su correspondiente plataforma. En el caso de Android, significa desarrollar una app desde cero mediante el lenguaje de programación estándar, es decir, Java o Kotlin. En el caso de los dispositivos que corren iOS, significa desarrollar las apps utilizando Swift o Objective-C. En ambos casos conseguimos el resultado más optimo posible acorde a cada plataforma y el rendimiento de estas suele ser superior para tareas complejas como geolocalización avanzada, librerías nativas, etc.


El desarrollo de apps híbridas simplifica el tiempo de desarrollo, pero limita las funcionalidades avanzadas. Una app híbrida, como su nombre indica, puede correr en cualquier dispositivo, ya sea iOS o Android, con una fuente de código común. El resultado final puede no seguir al 100% las normas visuales de cada plataforma y puede ver comprometido el rendimiento en ciertos aspectos. Por último, los entornos de desarrollo y depuración no suelen estar tan cuidados y no suelen tener soporte por parte de Google (Android) o Apple (iOS).


¿Qué es React Native?

React Native nace de la mano de Facebook con el objetivo de desarrollar apps nativas utilizando tecnología web, Javascript. Prometen un resultado de un rendimiento similar a una app nativa, así como un aspecto idéntico con las ventajas de las apps híbridas.


Hace falta decir que React Native no es para todos los proyectos, hay que analizar y conceptualizar todos los proyectos antes de lanzarnos a por una tecnología concreta, ya sea nativa o híbrida.

A continuación, os damos una introducción a React Native con la ejecución de un proyecto ‘hello world’. Veremos que cualquier desarrollador familiarizado con Javascript o NodeJS puede ejecutar de forma satisfactoria su primera app con React Native.

Instalaremos todo lo necesario en nuestra máquina

Para poder empezar a desarrollar con React Native debemos dejar nuestra máquina lista con un entorno de desarrollo correcto. Empezaremos instalando NodeJS y React Native. Una vez verifiquemos que la instalación ha sido correcta, seguiremos con la creación de un proyecto React Native. 


Ya está todo listo, ¡empecemos!


Abrimos nuestro proyecto con WebStorm.

Abriremos el proyecto con WebStorm (o nuestro IDE favorito). Veremos que el proyecto se ha creado con algunos archivos y parte de código. El fichero que nos importa es App.js, el punto de partida de nuestra app en React Native. Abrimos el archivo y eliminaremos todo lo que haya. 

Empezaremos añadiendo los componentes para utilizarlos más adelante en nuestra app (nada diferente a cómo lo haríamos en React).

[/et_pb_text][et_pb_dmb_code_snippet language=»javascript» style=»github» _builder_version=»3.8″ body_font_size_tablet=»51″ body_line_height_tablet=»2″ header_font_size_tablet=»51″ header_line_height_tablet=»2″]aW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudCB9IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsKICAgIFN0eWxlU2hlZXQsCiAgICBUZXh0LAogICAgVmlldywKICAgIEJ1dHRvbgp9IGZyb20gJ3JlYWN0LW5hdGl2ZSc7[/et_pb_dmb_code_snippet][et_pb_text module_class=»blog-style» _builder_version=»3.8″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»]

Construyendo nuestra app

Seguimos añadiendo los componentes de nuestra app, en este caso añadimos un campo de texto no editable, así como un botón qué mostrará una alerta por pantalla.

Si ya conocemos la sintaxis de React, vemos que la estructura es prácticamente idéntica.

[/et_pb_text][et_pb_dmb_code_snippet language=»javascript» style=»github» _builder_version=»3.8″ body_font_size_tablet=»51″ body_line_height_tablet=»2″ header_font_size_tablet=»51″ header_line_height_tablet=»2″]dHlwZSBQcm9wcyA9IHt9OwpleHBvcnQgZGVmYXVsdCBjbGFzcyBBcHAgZXh0ZW5kcyBDb21wb25lbnQ8UHJvcHM+IHsKICAgIGFsZXJ0UHJlc3MoKSB7CiAgICAgICAgYWxlcnQoJ8KhRXN0byBlcyB1bmEgYWxlcnRhIG5hdGl2YSEnKQogICAgfQoKICAgIHJlbmRlcigpIHsKICAgICAgICByZXR1cm4gKAogICAgICAgICAgICA8VmlldyBzdHlsZT17c3R5bGVzLmNvbnRhaW5lcn0+CiAgICAgICAgICAgICAgICA8VGV4dCBzdHlsZT17c3R5bGVzLndlbGNvbWVTdHJpbmd9PgogICAgICAgICAgICAgICAgICAgIMKhSG9sYSBNdW5kbyx7IlxuIn1lc3RvIGVzIFJlYWN0IE5hdGl2ZSF7IlxuIn0KICAgICAgICAgICAgICAgIDwvVGV4dD4KICAgICAgICAgICAgICAgIDxCdXR0b24KICAgICAgICAgICAgICAgICAgICBvblByZXNzPXt0aGlzLmFsZXJ0UHJlc3MuYmluZCh0aGlzKX0KICAgICAgICAgICAgICAgICAgICB0aXRsZT0iwqFIYXogY2xpY2sgYXF1w60hIgogICAgICAgICAgICAgICAgICAgIGNvbG9yPSIjRkZEOEQ4IgogICAgICAgICAgICAgICAgICAgIGFjY2Vzc2liaWxpdHlMYWJlbD0iwqFIYXogY2xpY2sgYXF1w60hIgogICAgICAgICAgICAgICAgLz4KICAgICAgICAgICAgPC9WaWV3PgogICAgICAgICk7CiAgICB9Cn0=[/et_pb_dmb_code_snippet][et_pb_text module_class=»blog-style» _builder_version=»3.8″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»]

Modificando los estilos

Por último, configuramos los estilos de los elementos de nuestra app.

[/et_pb_text][et_pb_dmb_code_snippet language=»javascript» style=»github» _builder_version=»3.8″ body_font_size_tablet=»51″ body_line_height_tablet=»2″ header_font_size_tablet=»51″ header_line_height_tablet=»2″]Y29uc3Qgc3R5bGVzID0gU3R5bGVTaGVldC5jcmVhdGUoewogICAgY29udGFpbmVyOiB7CiAgICAgICAgZmxleDogMSwKICAgICAgICBqdXN0aWZ5Q29udGVudDogJ2NlbnRlcicsCiAgICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsCiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2ZmNTY1NycsCiAgICB9LAogICAgd2VsY29tZVN0cmluZzogewogICAgICAgIGNvbG9yOiAnI2ZmZmZmZicsCiAgICAgICAgZm9udFNpemU6IDIwLAogICAgICAgIHRleHRBbGlnbjogJ2NlbnRlcicKICAgIH0KfSk7Cg==[/et_pb_dmb_code_snippet][et_pb_text module_class=»blog-style» _builder_version=»3.8″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»]

A estas alturas, nuestro archivo App.js debería ser idéntico al siguiente código.

[/et_pb_text][et_pb_dmb_code_snippet language=»javascript» style=»github» _builder_version=»3.8″ body_font_size_tablet=»51″ body_line_height_tablet=»2″ header_font_size_tablet=»51″ header_line_height_tablet=»2″]aW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudCB9IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsKICAgIFN0eWxlU2hlZXQsCiAgICBUZXh0LAogICAgVmlldywKICAgIEJ1dHRvbgp9IGZyb20gJ3JlYWN0LW5hdGl2ZSc7Cgp0eXBlIFByb3BzID0ge307CmV4cG9ydCBkZWZhdWx0IGNsYXNzIEFwcCBleHRlbmRzIENvbXBvbmVudDxQcm9wcz4gewogICAgYWxlcnRQcmVzcygpIHsKICAgICAgICBhbGVydCgnwqFFc3RvIGVzIHVuYSBhbGVydGEgbmF0aXZhIScpCiAgICB9CgogICAgcmVuZGVyKCkgewogICAgICAgIHJldHVybiAoCiAgICAgICAgICAgIDxWaWV3IHN0eWxlPXtzdHlsZXMuY29udGFpbmVyfT4KICAgICAgICAgICAgICAgIDxUZXh0IHN0eWxlPXtzdHlsZXMud2VsY29tZVN0cmluZ30+CiAgICAgICAgICAgICAgICAgICAgwqFIb2xhIE11bmRvLHsiXG4ifWVzdG8gZXMgUmVhY3QgTmF0aXZlIXsiXG4ifQogICAgICAgICAgICAgICAgPC9UZXh0PgogICAgICAgICAgICAgICAgPEJ1dHRvbgogICAgICAgICAgICAgICAgICAgIG9uUHJlc3M9e3RoaXMuYWxlcnRQcmVzcy5iaW5kKHRoaXMpfQogICAgICAgICAgICAgICAgICAgIHRpdGxlPSLCoUhheiBjbGljayBhcXXDrSEiCiAgICAgICAgICAgICAgICAgICAgY29sb3I9IiNGRkQ4RDgiCiAgICAgICAgICAgICAgICAgICAgYWNjZXNzaWJpbGl0eUxhYmVsPSLCoUhheiBjbGljayBhcXXDrSEiCiAgICAgICAgICAgICAgICAvPgogICAgICAgICAgICA8L1ZpZXc+CiAgICAgICAgKTsKICAgIH0KfQoKY29uc3Qgc3R5bGVzID0gU3R5bGVTaGVldC5jcmVhdGUoewogICAgY29udGFpbmVyOiB7CiAgICAgICAgZmxleDogMSwKICAgICAgICBqdXN0aWZ5Q29udGVudDogJ2NlbnRlcicsCiAgICAgICAgYWxpZ25JdGVtczogJ2NlbnRlcicsCiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2ZmNTY1NycsCiAgICB9LAogICAgd2VsY29tZVN0cmluZzogewogICAgICAgIGNvbG9yOiAnI2ZmZmZmZicsCiAgICAgICAgZm9udFNpemU6IDIwLAogICAgICAgIHRleHRBbGlnbjogJ2NlbnRlcicKICAgIH0KfSk7Cg==[/et_pb_dmb_code_snippet][et_pb_text module_class=»blog-style» _builder_version=»3.8″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»]

Ejecutando nuestra app en React Native

Ahora ya tenemos nuestra aplicación lista para ser ejecutada. Una vez tengamos nuestro proyecto listo (o simplemente queramos probarlo en un simulador), deberemos ejecutar nuestra app en el simulador de iOS o el emulador de Android.

Compilar nuestra app para iOS

Para compilar nuestra app en el simulador de iOS, necesitaremos tener instalado Xcode y todos los paquetes asociados a éste. Puedes descargártelo aquí.

Una vez tengas todos los componentes de Xcode instalados, podrás ejecutar (desde el directorio del proyecto HolaMundo) el siguiente comando en el terminal.

[/et_pb_text][et_pb_dmb_code_snippet language=»bash» style=»github» _builder_version=»3.8″ body_font_size_tablet=»51″ body_line_height_tablet=»2″ header_font_size_tablet=»51″ header_line_height_tablet=»2″]JCByZWFjdC1uYXRpdmUgcnVuLWlvcyAgI1BhcmEgZWplY3V0YXIgbGEgYXBwIGVuIGlPUwo=[/et_pb_dmb_code_snippet][et_pb_text module_class=»blog-style» _builder_version=»3.8″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»]

Después de unos segundos se abrirá el simulador de iOS con tu app ya lista para ser probada.

También puedes abrir el proyecto de Xcode de forma habitual y ejecutar tu proyecto desde él.

Compilar nuestra app para Android Para visualizar nuestra app en el emulador de Android, deberemos instalar Android Studio. Configuraremos la ruta de la instalación del Android SDK en nuestro ordenador para que React Native sepa encontrar la ruta de Android.

[/et_pb_text][et_pb_dmb_code_snippet language=»bash» style=»github» _builder_version=»3.8″ body_font_size_tablet=»51″ body_line_height_tablet=»2″ header_font_size_tablet=»51″ header_line_height_tablet=»2″]ZXhwb3J0IEFORFJPSURfSE9NRT0vVXNlcnMvdXNlcm5hbWUvTGlicmFyeS9BbmRyb2lkL3NkawpleHBvcnQgZXhwb3J0IFBBVEg9JHtQQVRIfTokQU5EUk9JRF9IT01FL3Rvb2xzOiRBTkRST0lEX0hPTUUvcGxhdGZvcm0tdG9vbHM=[/et_pb_dmb_code_snippet][et_pb_text module_class=»blog-style» _builder_version=»3.8″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»]

Una vez terminemos con la configuración, simplemente ejecutaremos el siguiente comando.

Si te de algún error al intentar abrir el emulador, prueba de ejecutar el emulador desde Android Studio y después ejecuta el siguiente comando.

[/et_pb_text][et_pb_dmb_code_snippet language=»bash» style=»github» _builder_version=»3.8″ body_font_size_tablet=»51″ body_line_height_tablet=»2″ header_font_size_tablet=»51″ header_line_height_tablet=»2″]JCByZWFjdC1uYXRpdmUgcnVuLWFuZHJvaWQgICNQYXJhIGVqZWN1dGFyIGxhIGFwcCBlbiBBbmRyb2lk[/et_pb_dmb_code_snippet][et_pb_text module_class=»blog-style» _builder_version=»3.8″ background_size=»initial» background_position=»top_left» background_repeat=»repeat»]

Veremos que el resultado son dos apps nativas con los componentes propios de cada una de las plataformas.

Puedes descargar el proyecto completo de nuestra cuenta de GitHub.

Si necesitas diseñar una app llámanos al 93 408 90 30 o ponte en contacto con nosotros.


3 vistas

WE CREATE DIGITAL EXPERIENCES  THROUGH MOBILE.

BCN

Torrent de l'Olla 218

08012 Barcelona

+34 93 408 90 30

ZRH

Shilquai 131

8005 Zürich

+41 77 979 83 87

Dribba es Partner de Barcelona Tech City
Dribba es Partner de Cataluya Mobile

© 2012-2020 Dribba Development & Consulting SL.

Dribba, the mobile agency y el logo de Dribba son marcas registradas de Dribba S.L.