Contenido
¿Qué necesito para programar en React Native?
El primer paso que tendremos que realizar para poder empezar a programar apps será establecer un entorno de desarrollo para React Native o IDE (Integrated Develepment Enviroment en inglés). Este paso es clave ya que nos permitirá desarrollar de una forma más rápida.
Además del entorno de desarrollo para React Native, será necesario instalar Node.js, que es un entorno de ejecución para Javascript. Este entorno de ejecución nos permitirá instalar software necesario para poder compilar y ejecutar nuestra aplicación móvil. Entre ellos necesitaremos instalar el software de Expo para poder depurar e instalar nuestra aplicación en nuestro propio smartphone de forma rápida.
Instalando Node.js en nuestro equipo
Lo primero que haremos será instalar Node.js en nuestro equipo. Para ello tendremos que seleccionar el paquete adecuando en la página web del proyecto Node.
Instalando Node.js en GNU/Linux
En sistemas GNU/Linux será tan fácil como utilizar el sistema de gestión de paquetes de nuestra distribución. Así, si usamos la distribución Ubuntu 20.04 para la instalación abriremos una terminal y ejecutaremos el siguiente comando:
sudo snap refreshCon ese comando actualizamos todos los paquetes instalados mediante el sistema snap. Ahora realizamos la instalción de Node.js usando el siguiente comando:
sudo snap install node --classicCon esto tendremos instalado Node.js en nuestro sistema GNU/Linux. También será posible realizar la instalación mediante el sistema de paquetería APT. Así obtendremos el paquete oficial de la distibución aunque tendremos una versión antigua del mismo, por lo que se recomienda el uso del paquete snap.
Instalando Node.js en Windows
Para instalar la versión de Windows es tan simple como descarga el instalador nativo en el siguiente enlace. Al ejecutar nuestro instalador seguimos las instrucciones que nos aparecen en pantalla.
Aceptamos la licencia del software que vamos a instalar:
Nos muestra la ruta de instalación del software Node.js que podremos cambiar si queremos. En principio se deja la que viene por defecto.
Nos aparecerá una diálogo con las opciones de instalación de Node.js. En principio dejamos las que nos aparecen por defecto y le damos a siguiente.
Nos aparecerá a continuación un diálogo preguntando si queremos instalar algunas herramientas extra como Chocolatey. Dejamos las opciones por defecto y continuamos.
Continuamos y nos solicita confirmación de la instalación. Al confirmar empieza copiar los ficheros necesarios de instalación y una vez acaba nos aparecerá en patalla el diálogo informándonos.
Instalando Expo-cli en el sistema
Una vez hemos instalado de forma correcta Node.js en nuestro sistemas continuamos instalando Expo. Este sistema nos permitirá desplegar nuestra aplicación de forma rápida en smartphone físico o un emulador de forma sencilla.
Para realizar la instalación de este componente software usaremos una terminal en GNU/Linux o el símbolo de sistema de Windows con privilegios de administración. Así en el terminal de GNU/Linux escribiremos el siguiente comando:
sudo npm i -g expo-cliEn el símbolo de sistema de Windows con privilegios de adminsitración debemos escribir el siguiente comando:
npm i -g expo-cliDeberemos esperar un rato hasta que se instalen todos los componentes necesarios, tras lo cual ya tendremos instalado Expo-cli y podremos crear proyectos y desplegar proyectos de React Native.
Eligiendo un entorno de desarrollo para React Native
Existe un gran número de entornos de desarrollo que podríamos usar para programar nuestras aplicaciones móviles. Sin embargo, de entre todos los entornos de desarrollo vamos a seleccionar uno que tenga algunas características.
Lo primero a tener en cuenta es que queremos utilizar un entorno que sea gratuito y de código abierto. Esto es una ventaja, ya que no tendremos que pagar nada por el IDE. Además, si es de código abierto normalmente la comunidad de desarrolladores tendrá más fácil desarrollar nuevas funcionalidades y plugins.
Otro punto a tener en cuenta es usar un IDE que nos sirva para varios lenguajes de programación o esté especializado en uno. En el primer caso tendremos una herramienta más versátil. En el caso de un IDE especializado puede que sea una herramienta con funciones específicas para ese lenguaje que no sean útiles.
Un último punto a tener en cuenta será si el entorno de desarrollo está disponible para varias plataformas o no. En general será mejor usar un IDE que esté disponible para distintos sistemas operativos como Windows o GNU/Linux. De esta forma una vez que aprendamos a usarlo podremos utilizar en más lugares y nos estaremos atados a una plataforma concreta.
Para el curso actual, vamos a utilizar un IDE llamado Visual Studio Code. Este entorno de desarrollo tiene algunas de las ventajas que hemos definido anteriormente. En primer lugar, es un entorno gratuito y no tendremos que pagar por usarlo. Además, este IDE nos servirá para un gran conjunto de lenguajes y tecnologías distintas, ya que dispone de una gran cantidad de plugins y es usado una gran cantidad de usuarios. Por último, este entorno está disponible para los principales sistemas operativos, entre ellos: GNU/Linux, MacOS y Windows.
Instalando Visual Studio Code en GNU/Linux
La instalación de Visual Studio Code para un sistema operativo GNU/Linux dependerá de la distribución concreta. Este IDE tiene paquetes oficiales para distribuciones como Debian, Ubuntu, Fedora, etc.
En nuestro caso usaremos la distribución Ubuntu 20.04 para realizar el ejemplo de instalación en GNU/Linux. Podemos realizar la instalación descargando el fichero DEB correspondiente desde la sección de descargas.
También podemos utilizar el sistema SNAP que nos permite instalar software de terceros más actualizado que el que está contenido en los repositorios oficiales de Ubuntu. Para usar este método escribiremos en una terminal lo siguiente:
sudo snap refreshCon esto actualizamos todos los paquetes instalados con snap. A continuación, realizamos la instalación de Visual Studio Code mediante el siguiente comando:
sudo snap install code Instalando Visual Studio Code en Windows
Para instalar el entorno de desarrollo para React Native en Windows, nos descargamos el instalador desde la página web. Al ejecutar el instalador nos aparece el diálog siguiente con la licencia:
Debemos aceptar el acuerdo de licencia y continuar con la instalación. A continuación nos aparece un diálogo pesentando algunas opciones de la instalación que podremos seleccionar o no en función de los que nos interese. Normalmente dejaremos las opciones por defecto.
Continuamos con el siguiente diálogo al que simplemente daremos a instalar. Finalmente nos aparecerá el diálogo que nos informa que el entorno se ha instalado correctamente y nos indicará si queremos iniciar el programa.
Plugins recomendados para desarrollar con React Native en Visual Studio Code
Una vez instalado el entorno de desarrollo para React Native, necesitaremos seleccionar los mejores plugins del IDE. Este entorno contiene una ingenete cantidad de funcionalidades desarrolladas por la comunidad del mismo. Sin embargo nos centraremos en los que vamos a emplear en este curso de programación.
Al iniciar el entorno de desarrollo nos encontraremos la ventana principal del entorno. En el diálogo tendremos un menú principal y una barra lateral. En la barra lateral encontramos el botón de plugins que aparece resaltado en la siguiente imagen:
Al pulsar en ese botón nos aparecerá una lista con los principales plugins para Visual Studio Code. Si buscamos React Native nos aparecen los principales plugins disponibles para esta plataforma:
Para instalar un plugin es tan sencillo como pulsar el botón azul con el texto install y esperar a que instale todos los ficheros necesarios.
Para el presente curso vamos a instalar los siguientes plugins:
- React Native Tools: Permite la integración de React Native con el IDE Visual Studio Code. Nos permitirá gestionar, depurar nuestros proyectos, etc.
- React-Native/React/Redux snippets for es6/es7: El plugin contiene una serie de snippets, es decir, atajos de texto que construyen una estructura de texto más compleja. Este plugin es opcional, pero muy recomendable, ya que nos agiliza el trabajo.
- Prettier: Este plugin nos ayudará a formatear nuestro código, de forma que, tendrá una apariencia más ordenada y permitirá una lectura más clara y rápida. Este plugin es opciones pero muy recomendable para que nuestro código luzca ordenado y legible.
Una vez instalados todos los plugins, podemos configurar que el formateo del código se realice siempre al guardar. Para ello, pulsamos en File –> Preferences –> Settings que nos abrirá el diálgo configuración de Visual Studio Code. En el cuadro de búsqueda escribimos «format on save» y nos aparecerá la opción para marcarla:
Resumiendo
Hemos instalado en nuestro sistema Node.js que nos permitirá desarrollar basados en Javascript. Además hemos instalado Expo-cli para desplegar y depurar proyectos basados en React Native. Por últimos hemos instaldo Visual Studio Code y una serie de plugins que nos ayudará en el desarrollo de proyectos para React Native.
Con esto ya tenemos un entorno de desarrollo para React Native listo para empezar a programar nuestra primera aplicación para smartphone basada en React Native.
Recuerda que este artículo forma parte de un curso más amplio para desarrollar aplicaciones para smartphone. Si te ha gustado el artículo, no dudes en compartirlo a quién le pueda interesar.
Sugerencias
