Como Crear una Aplicación Básica “Hola Mundo” con React Native 0.63.2

React Native | | Comunidad: Crear un Post, Eventos Devs, Foro

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, vamos con este Post.

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 Básica “Hola Mundo” 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, puede probar Snack.

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 CLI para tener soporte de comandos React Native, para instalar React Native CLI, ejecutamos el siguiente comando, le agregaré la flag para instalarlo de manera global en mi computador y poder ejecutar comandos de React Native en cualquier lugar de mi computador.

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

Creación de Nueva 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).

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, buen entonces abrimos una nueva consola o terminal y ejecuto el siguiente comando para correr mi aplicación en el emulador de Android Studio.

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.

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.

Conclusión

En este tutorial hemos aprendido a crear una aplicación básica con React Native, esto sirve 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. 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments