/ JavaScript

Instalación y Creación de un Proyecto React Native para Android

React Native es un framework que te permite desarrollar aplicaciones móviles utilizando únicamente JavaScript, utiliza el mismo diseño que React, lo que le permite componer una rica interfaz de usuario móvil a partir de componentes declarativos.

React Native te permite crear aplicaciones móviles nativas tanto para Android y iOS

Página Oficial

React Native

Desarrollar aplicaciones móviles para Android ó iOS antes que existiera los frameworks como Phonegap, Ionic, forsozamente teníamos que aprender a programar en Java si queríamos desarrollar aplicaciones móviles para Android ó Swift para aplicaciones móviles iOS.

Por otro lado para desarrollar aplicaciones móviles en Phonegap, Ionic y otros más, solamente teníamos que saber HTML, CSS y JAVASCRIPT; pero el gran detalle es que estas aplicaciones móviles funcionaban a través del navegador lo cual no permite tener una mejor experiencia de usuario.

Pero si pensabas que eso era el final de la evolución para el desarrollo móvil utilizando CSS, HTML y JAVASCRIPT; te comento que estabas equivocado ya que Facebook a desarrollado React Native el cual nos permite crear aplicaciones móviles utilizando JSX (JavaScript + html) a desarrolladores web y compilarlo en su forma nativa el cual mejora notablemente la experiencia de usuario.

Instalación React Native (Android)

Acá pueden visitar la documentación oficial para la instalación de React Native.

Para poder empezar a desarrollar aplicaciones en React native vamos a instalar las siguientes aplicaciones, de preferencia en el siguiente orden:

Las recomendaciones de la página oficial de React Native es que se realice la instalación de las aplicaciones a través del gestor de paquetes Chocolatey el cual nos permite instalar aplicaciones desde repositorios en Windows.

Solo recuerda que usar Chocolatey es una recomendación hecha por los desarrolladores de React Native, si tu no lo prefieres usar es tu decisión.

Para instalar Chocolatey abrimos el CMD de Windows con los permisos de administrador, copia (Ctrl + c) el siguiente código, luego pega (Ctrl + v) en el CMD y para finalizar presiona la tecla Entrar.

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "(iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))) >$null 2>&1" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

imagen powershell

Para comprobar que la instalación de Chocolatey a sido de forma satisfactoria escribimos el en el CMD chocolatey -v el cual mostrara la versión de Chocolatey instalado.

versión de chocolatey

Instalación de Python 2 a través del gestor de paquetes Chocolatey.

choco install python2

Instalación de Node.js a través del gestor de paquetes Chocolatey.

choco install nodejs.install

Instalacion del paquete React Native: Node viene con npm (Node Package Manager), que permite instalar React Native desde la interfaz de línea de comandos con el siguiente código.

npm install -g react-native-cli

Por ultimo descarga e instala Android Studio que servirá para usar el emulador y así podremos testear nuestros proyectos hechos en React Native.

Crear un Proyecto con React Native

Vamos a crear un proyecto React Native para desarrollar aplicaciones Android.

Primero abrimos el CMD luego nos desplazamos a la carpeta ó disco local donde se almacenaran nuestros proyectos, escribimos y ejecutamos el siguiente código.

react-native init AwesomeProject

Cambia el nombre del proyecto AwesomeProject por el nombre oficial de tu aplicación.

Crear un proyecto React Native

Al presionar la tecla Entrar nos mostrara un mensaje donde dice "Installing react-native package from npm...", pero ten en cuenta que este mensaje puede variar si React Native realiza modificaciones en su código.

Crear un proyecto React Native

La creación del proyecto puede demorar varios minutos, pero una vez terminado nos mostrara un mensaje como esto, indicando la ruta donde se creo el proyecto.

Crear un proyecto React Native

Una vez creado el proyecto accedemos al interior de la carpeta.

cd AwesomeProject

Ponemos en marcha nuestro servidor React native

Para poner en marcha nuestro servidor y comprobar que todo esta funcionando de manera correcta escribimos el siguiente código.

react-native run-android

Bueno mis amigos ya tienen todo listo para empezar a desarrollar aplicaciones móviles utilizando el framework React Native.

Luis Rene Mas Mas

Luis Rene Mas Mas

Soy desarrollador front-end, me encanta las nuevas tecnologías web, administrar este blog es mi pasatiempo favorito.

Leer Más