Como Crear una Aplicación con React Native 0.63.2

9 minuto(s)

Demo Github

La mejor forma de aprender a dominar una herramienta como React Native, es poniéndola en práctica, por eso vamos a crear una aplicación básica que lance el mensaje o texto Hola Mundo, con este tutorial conoceremos al menos los pasos iniciales que debemos realizar para crear un proyecto en React Native, de esta manera más adelante crearemos aplicaciones más complejas con React Native. En este post te enseñaré a Como Crear una Aplicación con React Native 0.63.2, vamos con ello.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Crear una Aplicación con React Native 0.63.2.

Como Crear una Aplicación con React Native 0.63.2

Para usar React Native, debes tener instalado Node JS en tu computadora y también necesitas tener instalado Android Studio para emular la aplicación y realizar otras tareas requeridas, pero si quieres que tu aplicación funcione también en iOS, debes de tener un computador de la manzana Apple para instalar Xcode y poder emular y realizar tareas para los dispositivos móviles de Apple como el iPhone, si tuviera dispositivos de Apple te enseñaría, pero bueno espero en algún momento poder hacerlo, por ahora trabajemos con Android.

Hasta la fecha de este Post, React Native en su documentación nos menciona que si deseas probar React Native directamente en tu navegador web antes de instalar cualquier herramienta, puedes hacerlo mediante Snack de Expo.

Asimismo la configuración cambia un poco, dependiendo de que Sistema Operativo estés usando, yo voy trabajar con Windows para este tutorial, también necesitaré tener instalado Java SE Development Kit (JDK) y Python (como mínimo la versión 2 de Python), entonces para crear mi aplicación Android con React Native, necesito las siguientes herramientas o tecnologías:

Una vez que tenemos instaladas todas estas herramientas o tecnologías, podemos continuar con la creación de la aplicación con React Native.

También debemos de agregar 2 variables de entorno en Windows, primero creamos una variable ANDROID_HOME con el valor de la ubicación del SDK de Android correspondiente:

La segunda variable la colocamos en la variable Path con el valor de la ubicación del SDK de Android correspondiente más el directorio platform-tools:

Antes de crear la aplicación, debemos de instalar React Native y la React Native CLI para tener soporte de comandos React Native, para instalarlos, ejecutamos los siguientes comandos, le agregaré la flag -g para instalarlos de manera global en mi computadora y poder ejecutar comandos de React Native desde cualquier lugar de mi computador.

Ejecuta los siguientes comandos uno por uno, espera que termine de ejecutarse primero uno y luego ejecutas el otro, sigue el orden indicado:


Ahora que instale React Native CLI, puedo ejecutar comandos de React Native para crear y gestionar nuestro proyecto.

Creación de Nuevo Proyecto

Ahora voy a crear un nuevo proyecto en React Native, para crearlo ejecuto el siguiente comando, le pondré de nombre appholamundo.


En el comando que ejecute anteriormente le puse el nombre appholamundo a mi aplicación, tu puedes ponerle el nombre que desees, cuando React Native termina de crear el proyecto, al final nos muestra unas instrucciones para emular la aplicación en cada sistema operativo, ya sea iOS, Android o Windows y macOS.

Bien, luego que React Native termino de crea el proyecto, me ha generado un directorio llamado appholamundo, que contiene un conjunto de directorios y archivos para que la aplicación funcione correctamente.


Cuando hice la creación del nuevo proyecto en React Native, este me ha creado una aplicación básica, la cual ejecuto o corro en el emulador de Android Studio, para poder correr el emulador, abro cualquier proyecto que haya creado en Android Studio, solo necesitaré el emulador y si ya lo tienes abierto pues no hay problema puedes continuar.  Estoy usando Android Studio 4.0 y tengo creado un emulador con Android 9 – Pie (API 28).

Ahora ingresa por la consola de comandos al directorio del proyecto creado, en micaso ingreso al directorio /appholamundo y con el emulador de Android Studio abierto, voy a ejecutar el siguiente comando en mi consola de comandos (Yo estoy usando la consola GitBash), para iniciar Metro, este es un paquete de JavaScript que se envía con React Native, este paquete ya viene incluido en React Native.


Ahora abrimos una nueva consola o terminal, no debemos cerrar la anterior, hay que dejarla ejecutándose. Bueno entonces abrimos una nueva consola o terminal y ejecuto el siguiente comando para correr mi aplicación en el emulador de Android Studio.


Talvez te aparezca algún error en específico y diferente al mio, por ejemplo a mi, luego de ejecutar el comando anterior en cierto punto me aparece el error: Gradle error: Could not initialize class org.codehaus.groovy.runtime.InvokerHelper, este error se debe a que React Native hasta la fecha de este tutorial, me pide que use la versión de Gradle 6.3, entonces abro el archivo gradle-wrapper.properties que se encuentra en appholamundo > android > gradle > wrapper > gradle-wrapper.properties


Dentro del archivo gradle-wrapper.properties debo agregar el paquete de la versión 6.3 de Gradle,


Nuevamente vuelvo a ejecutar el comando anterior para arrancar mi aplicación en el emulador de Android Studio.


Y me carga la aplicación en el emulador de Android Studio.

Modificar el contenido de la aplicación

Genial ya hemos creado nuestra primera aplicación, pero cambiaré ese contenido por el texto Hola Mundo !, para esto creo un componente llamado HolaMundo.js en el directorio principal del proyecto.


Abro el archivo HolaMundo.js que he creado y agrego el siguiente contenido con el texto Hola Mundo !


Luego abro el archivo index.js que se encuentra en el directorio principal del proyecto.


Y comento la importación del componente App.js y en su lugar importo mi componente HolaMundo.


Voy al emulador y puedo ver que se ha realizado el cambio y puedo ver el texto o mensaje Hola Mundo !

Eso es todo, hemos creado nuestra aplicación Hola Mundo y de paso también un componente en React Native.

Verificar que Tienes Todo Configurado e Instalado Correctamente

Quizás obtengas algunos errores, es normal porque estás comenzando, para verificar que es lo que te falta instalar o configurar te recomiendo detener todos los comandos que estas ejecutando en tu terminal o consola y ejecuta el comando react-native doctor:


El comando react-native doctor te dirá todo lo que tienes que arreglar para poder trabajar tranquilamente con React Native.

Conclusión

En este tutorial hemos aprendido a Como Crear una Aplicación con React Native 0.63.2, esto te servirá como base para crear otras aplicaciones más complejas o avanzadas en React Native.

Nota(s) 

  • Los pasos mencionados en este tutorial pueden ser modificados o continuar en el futuro, esto no depende de mi, si no de la Empresa que da soporte a React Native.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.