marzo 28, 2024

BitCuco

¡Hola Mundo!

React Native – Guía de Instalación con Links

react native

React Native es un framework de código abierto, cuyo funcionamiento principal es crear aplicaciones para diferentes plataformas, tanto iOS, Android y aplicaciones Web. Fue desarrollado por la comunidad de Facebook en el año 2015.

Funcionamiento de React Native

El funcionamiento principal de React Native se hace a través de mensajes en Javascript. Sin embargo proporciona el framework una vía para que los desarrolladores también puedan utilizar código nativo del lenguaje, por ejemplo Swift u Objective-C para iOS y Kotlin o Java para Android.

Para llevar a cabo el desarrollo con React Native, requerimos la instalación de los paquetes requeridos para su instalación, por ejemplo Node.js, los cuáles veremos en la siguiente sección:

react native

Prerrequisitos para instalar React Native

Previamente a la instalación de React Native, requerimos instalar Node.js. Para instalar Node.js, podemos seguir la guía de instalación desde su sitio oficial, o bien podemos seguir los siguientes pasos:

Instalación de Node.js

Para instalar Node.js, en primer lugar hacemos la descarga del paquete desde su sitio oficial, de acuerdo con el sistema operativo que tengamos, por ejemplo Windows, MacOS o Linux, descomprimir e instalar el paquete. No obstante también podemos instalarlo por un manejador de paquetes.

La forma más sencilla para instalar Node.js con un manejador de paquetes se muestra en el sitio de Node.js, en donde se muestra la instalación para Windows, MacOS y varias distribuciones de Linux. En el caso de iOS, vas a requerir instalarlo en MacOS, y lo tomaremos como ejemplo para la instalación de Node.js

Instalación de Node.js en MacOS

Para instalar Node.js en MacOS se puede utilizar alguna de las siguientes formas:

  • Con Homebrew: brew install node
  • Con MacPorts: port install nodejs7
  • Con pkgsrc: pkgin -y install nodejs
  • O instalando Node.js desde su fuente original:
curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

Instalación de Node.js en Windows

Ejecutamos el instalador descargado directamente desde su sitio web.

Instalación de React Native para iOS

La instalación de React Native para usarse en iOS requiere de Xcode, el cual se encuentra exclusivamente en equipos con el sistema operativo MacOS.

Como primer paso instalamos Node.js (por lo menos la versión 10.0), tal y como se mostró en la sección anterior. Posteriormente instalamos Watchman utilizando Homebrew utilizando el siguiente comando en consola:

brew install watchman

Instalación de Xcode

Para hacer uso de React Native en iOS requerimos instalar Xcode. Xcode es el IDE de desarrollo para aplicaciones iOS y es muy fácil instalarlo directamente desde la App Store.

Instalación de Xcode Command Line Tools

La instalación de las herramientas para la línea de comandos de Xcode se hace pulsando en el menú Xcode -> Preferences, ir a la sección Locations y seleccionar la versión más reciente en Xcode Command Line Tools, tal y como se muestra en la siguiente imagen:

react native

Instalar un simulador de iOS y Cocoapods

El simulador de iOS se instala directamente en Xcode -> Preferences -> Components. Cocoapods requiere el manejador de versiones de Ruby (gem) como prerrequisito. La instalación más simple de Cocoapods es a través del siguiente comando:

sudo gem install cocoapods

Crear una nueva aplicación de React Native para iOS

Para crear una nueva aplicación para React Native, es suficiente iniciar ejecutar el siguiente comando:

npx react-native init miproyecto

En donde miproyecto es el nombre del proyecto que deseas crear para utilizarse con React Native.

Ejecutar una aplicación de React Native para iOS

Para ejecutar cualquier aplicación de React Native, debemos ejecutar Metro, el cual es un constructor de Javascript, el cual toma todo el código que tenemos, así como sus dependencias, para crear un solo archivo Javascript. Su ejecución se realiza desde la raíz del proyecto en React Native, y se hace con el siguiente comando:

npx react-native start

Para iniciar la aplicación, en la consola ejecutamos también en la raíz del proyecto en React Native el siguiente comando para ejecutarlo con ambiente iOS:

npx react-native run-ios

Editar una aplicación de React Native para iOS

Para editar una aplicación de React Native, procedemos a editar el archivo App.js, éste archivo de Javascript contiene el concentrado de nuestro código. Una vez realizada cualquier modificación, procedemos a recargar la aplicación con command + R.

react native

Instalación de React Native para Android

Para ejecutar aplicaciones con React Native con Android, requerimos Android Studio y algunas dependencias que varían de acuerdo al sistema operativo, las cuáles les mostraré a continuación.

Instalación de Android Studio

La instalación de Android Studio se realiza a través del instalador descargado desde su sitio. El instalador lo ejecutamos y seguimos las instrucciones de instalación, solo verificando que se encuentren seleccionadas las opciones siguientes:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
  • Si no utilizas Hyper-V: Performance (Intel ® HAXM)

Instalación para Android en MacOS

Requerimos como requisitos previos instalar Node.js, Watchman y el kit de desarrollo Java. Para instalar éstos requerimentos, lo podemos resumir en las siguientes tres líneas de comandos:

brew install node
brew install watchman
brew cask install adoptopenjdk/openjdk/adoptopenjdk8

Configurar Android Studio

La configuración de React Native para Android Studio requiere al menos la versión de Android 10. Para ello seguimos éstos sencillos pasos:

  • Seleccionamos Configuración -> SDK Manager. También está disponible desde Appearance & Behavior -> System Settings -> Android SDK.
  • Seleeccionar las opciones Android SDK Platform 29 y Intel x86 Atom_64 System Image (o Google APIs Intel x86 Atom System Image)
  • En la pestaña SDK tools -> Show Package Details ver que Android SDK Build-Tools se encuentre al menos en la versión 29.0.2

Configurar Android Home

Para configurar las variables de entorno requeridas, procedemos a agregar las siguientes líneas de comandos a los archivos $HOME/.bash_profile o bien $HOME/.bashrc.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Después cargamos la configuración utilizando el comando

source $HOME/.bash_profile

Iniciar una nueva aplicación

Como lo vimos en el apartado de iOS, para iniciar una nueva aplicación en Android Studio, utilizamos el comando (suponiendo que el nuevo proyecto queremos llamarlo miproyecto)

npx react-native init miproyecto

Ejecutar una nueva aplicación

Para ejecutar una nueva aplicación, también utilizamos los siguientes comandos, el primero para iniciar React Native y el segundo para definir el ambiente, que en éste caso es Android:

npx react-native start
npx react-native run-android

Editar la aplicación

Para editar una aplicación, modificamos el archivo App.js, el cual es nuestro archivo concentrado en Javascript. Al finalizar, procedemos a recargar la aplicación utilizando la opción Reload del menú Developer.

Instalación para Android en Windows y Linux

Las instrucciones para instalación en los ambientes de Windows y Linux se pueden encontrar en el sitio oficial. Los procedimientos son muy similares a los efectuados en MacOS, con la diferencia de los paquetes, dependencias y comandos.