Comenzando con React Native en solo 3 pasos

Introducción

React en general se ha convertido en un trending dentro de las comunidades de desarrollo, y en Latinoamérica ha tenido una aceptación enorme, esto liderado por la tendencia de grandes empresas y startups que están creando sus apps sobre esta tecnología, la llegada de React-Native viene a ser un golpe fuerte (por decirlo de alguna manera) para las herramientas nativas pero a su vez es un espectacular amanecer para el desarrollador web que quiere migrar fácilmente a la construcción de aplicaciones móviles.
Ya que en vez de ir directamente al lenguaje nativo respectivo (Swift, Java), puedes utilizar tus ya consolidadas habilidades en Javacript para crear "MobileApps" y aún si eres un principiante el aprender Javascript acorta el camino para convertirte en desarrollador "Full-Stack" (ya que Javascript corre tanto en el navegador, como servidor y ahora movil) y crear tus propias apps completas en sus tres partes (backend, frontend, mobile), esto por la gran cantidad de ventajas como son:


No tienes que reaprender un lenguaje de programación nuevo.


No tienes que entender cómo funciona Android Studio o Xcode.


No tienes que usar diferentes herramientas por plataforma para el consumo Rest (lo cual es dolorosisimo).


No tienes que hacer 2 apps con código y lógica diferente cada uno.


Solo tienes que escribir el App 1 sola vez


Si ya sabes programar con Javascript, eso es todo lo que necesitas.

Yo sé que haya afuera hay predicadores religiosos que buscan a toda costa defender los lenguajes nativos por sobre frameworks javascript, y es bueno hablar de los "pros" y "cons" pero la charla se termina cuando los argumentos son meramente fanatismo religioso. Esto lo comento porque en FixterGeek siempre buscamos que el desarrollador use las herramientas que tiene a la mano, para acortar el tiempo o la dificultad lo cual les da ventaja sobre su competencia, esto es la cultura hacker, el no reinventar la rueda y usar el método científico, el no explorar herramientas tan geniales como React-Native es coartar tu exploración profesional por un dogma fanático por lo establecido. ¡Experimenta!.
Además una de las poderosas razones de porque React-Native está creciendo tanto es lo que su mismo nombre dice: React-Native compila a lenguajes nativos, esto es que tu escribes en Javascript o EcmaScript2015 y tu aplicación se transformará en componentes nativos de java o swift para un producto final que se siente como nativo, porque es lenguaje nativo. (nativo everywhere) =D =D =D
Así que sin más, vamos de lleno a crear nuestra primer App con React-Native.

Paso #1

Instalando las herramientas necesarias por sistema operativo

Yo creo que lo más difícil de empezar con React-Native es la cantidad de herramientas que se dan por hecho y que si no las haz usado anteriormente toma bastante tiempo instalar y configurar, como son:

  • NodeJs en una version minima 6.5.0
  • Npm el instalador de paquetes de NodeJs
  • El JDE de Java
  • El JDK de Android (de preferencia instala Android Studio completo)
  • Y si estás en Mac: Xcode

    Una vez que nos aseguramos de tener instaladas las herramientas anteriores, vamos a ubicarnos en una carpeta donde podamos construir nuestra app, esto puede ser en el escritorio de nuestra computadora.

    Si estas en Windows te recomiendo instalar Chocolatey, el cual es un instalador de paquetes muy popular en Windows para instalar las herramientas necesarias:

    Node, Python2, JDK

    choco install nodejs.install  
    choco install python2  
    choco install jdk8  
    

    Puedes encontrar más información sobre la instalación de Node en Node.js's

    En windows es muy importante crear una variable de entorno llamada ANDROID_HOME en:
    Panel de control → Sistema y seguridad → Sistema → Cambiar configuración → configuración avanzada del sistema → variables de entorno → nueva, y escribes la ruta a tu Android SDK (al instalar el SDK de android asegúrate de recordarlo).

    Si estas en Linux ¡Maravilloso! primero dejame felicitarte por ser parte de la comunidad FreeSoftware. Y ahora solo necesitas tener NodeJs instalado y lo puedes descargar segun tu distribución desde aquí:

    Descarga NodeJs

    Agrega también la variable ANDROID_HOME a tu PATH.
    Agregando las siguientes lineas a tu archivo ~/.profile
    (o equivalente como ~/.bashrc o ~/.zshrc que están en /home/user/ y los puedes encontrar ejecutando el comando ls -a):

    export ANDROID_HOME=${HOME}/Library/Android/sdk  
    export PATH=${PATH}:${ANDROID_HOME}/tools  
    export PATH=${PATH}:${ANDROID_HOME}/platform-tools  
    

    Ejecuta source ~/.profile para cargar la configuración que acabas de hacer en tu sesión actual del shell.

    Si estas en Mac Tu también puedes desarrollar aplicaciones para iOS, ya que el desarrollo de estas apps es privativo de una computadora Mac, Te recomiendo instalar HomeBrew el cual es un instalador de paquetes para Mac:

    brew install node  
    brew install watchman  
    

    También necesitarás Xcode si planeas crear aplicaciones para iOS y no olvides colocar también la variable ANDROID_HOME como en el paso anterior.

    Ahora que haz seleccionado tu sistema operativo e instalado las herramientas necesarias pasemos a instalar React-Native de forma global:

    Paso #2

    Instalando React Native y creando un emulador

    React Native CLI

    npm install -g react-native-cli
    

    Entorno de desarrollo para Android

    Una vez que has instalado lo anterior y AndroidStudio, es momento de instalar el SDK de Android (Marshmallow):

    Puedes encontrar el SDK Manager en el menu de Android Studio "Preferences", Appearance & Behavior → System Settings → Android SDK.

    Y por ultimo, vamos a crear un dispositivo virtual (emulador), esto dentro de android studio en "AVD Manager":

    Paso #3

    ¡Probemos!

    Ahora que hemos instalado todo lo necesario dependiendo de nuestro sistema operativo, es la hora de la verdad.
    Si todo está correctamente instalado nuestro hola mundo funcionara, y si no, este es el punto donde podremos enfrentarnos a la resolución de errores en nuestro entorno de desarrollo
    No temas!, es muy saludable corregir errores, nos permite conocer más como funcionan nuestras herramientas además de que si lo resolvemos ahora, podremos desarrollar en el futuro mucho más rápido

    Intentemos pues

    Asegurate de tener corriendo el emulador (AVD) que creaste anteriormente dentro de Android Studio

  • Creamos nuestro proyecto con el comando:

    react-native init FixterGeek  
    

  • Entramos a la carpeta de nuestro proyecto recién creado:

    cd FixterGeek  
    

  • Intentamos correr nuestro proyecto con el comando:

    react-native run-android  
    

    Si todo salió bien deberíamos ver algo como esto:

    Si tienes el error de "react-native Command not found", recuerda que debes instalar globalmente (-g) si aún así sigue apareciendo el error revisa tu instalación de NodeJs y npm

    Hasta aquí hemos terminado de instalar React Native, estamos listos para modificar este "boilerplate" y mostrar nuestros propios componentes.

    Nos vemos en el Próximo post ;)