¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


En este tutorial vamos a crear un sencillo Hola Mundo con React Native para Android y iOS utilizando ReactJS.

Con React Native no desarrollas una “aplicación web móvil”, una “aplicación HTML5” o una “aplicación híbrida”, sino que desarrollas una aplicación nativa exactamente igual que si la desarrollaras utilizando Objective-C o Java.

Para poder conseguir ese resultado, lo único que tienes que hacer es escribir esa lógica con Javascript y ReactJS.

Instalar y configurar React Native en Windows

Nosotros vamos a seguir las recomendaciones de React Native, así que si no tienes instalado Node o Python, lo primero que debes hacer si estás en windows es instalar chocolatey, una vez lo tengas ejecuta los siguientes comandos para instalar las dependencias.

Si no tienes instalado el SDK de Android entonces simplemente sigue el siguiente tutorial donde podrás llevar a cabo la instalación sin problemas.

Finalmente ejecuta el siguiente comando en la terminal para tener disponible el comando react-native a nivel global en tu terminal.

Instalar y configurar React Native en MAC OS

Si estás en MAC OS lo primero que debes hacer es instalar Homebrew y xcode si aún no los tienes, una vez los tengas instalados simplemente abre una terminal y ejecuta el siguiente comando para instalar el SDK de Android.

El comando anterior habrá instalado el SDK en el directorio /usr/local/Cellar/android-sdk/, así que si lo necesitas ya sabes donde lo tienes.

Finalmente ejecuta el siguiente comando en la terminal para tener disponible el comando react-native a nivel global en tu terminal.

Abrir el Android SDK Manager

Si estás en Windows simplemente puedes buscarlo sea cual sea tu versión, si estás en MAC OS ejecuta el comando android en la terminal, en cualquiera de los casos tendrás algo similar.



Llegados a este punto sólo debes instalar las herramientas que necesites y crear un emulador, para crear un emulador simplemente pulsa sobre el siguiente gif.


Primera aplicación con React Native

Ahora que ya tenemos todo lo necesario instalado, vamos a crear nuestra primera aplicación, así que abre una terminal ubicado en el directorio que desees guardar el proyecto y ejecuta el siguiente comando.

Con el comando anterior se habrá creado un directorio llamado PrimerProyecto el cual contiene todo lo necesario para desarrollar aplicaciones con React Native, si quieres escribir una aplicación para android entonces debes trabajar en el archivo index.android.js, si en cambio deseas trabajar con iOS debes trabajar en el archivo index.ios.js, es así de sencillo.

Hola Mundo con React Native en Android

Abre el archivo index.android.js y reemplaza el código por el siguiente.

La única línea que nos debe extrañar un poco es la última, simplemente es para registrar el componente que hemos creado, el resto es simplemente ReactJS, si tienes dudas, recuerda que tienes un curso gratuito de ReactJS.

Con StyleSheet.create simplemente definimos estilos que podrán ser utilizados en nuestro componente.

Para ejecutar nuestra aplicación bajo Android simplemente ejecuta el siguiente comando en la terminal.

Por defecto se abrirá el emulador que hemos creado anteriormente y si has seguido correctamente todos los pasos tendrás tu primera aplicación con React Native bajo Android.

Hola Mundo con React Native en iOS

Para crear tu primera aplicación en iOS, puedes utilizar el mismo código generado en el componente PrimerProyecto, lo puedes copiar y pegar en el archivo index.ios.js, lo único que debes hacer es ejecutar otro comando en la terminal, pero sólo si estás en MAC OS.

Ahora se abrirá el emulador por defecto que tengas configurado con xcode y de la misma forma, si hemos seguido correctamente todos los pasos, todo estará funcionando.

Cómo puedes ver, existe un archivo independiente para cada plataforma, de esta forma, podemos personalizar todo aún más y aplicar la lógica que necesitemos en cada uno de los casos.

Eso no quiere decir que no podamos reutilizar todos los componentes que vayamos creando, todo lo contrario, pero si se da el caso que algún componente/plugin no es compatible con una plataforma, lo podremos esquivar de forma sencilla.

Espero que te haya resultado útil el tutorial y te animes a probar React Native, poder desarrollar aplicaciones nativas de esta forma es algo que los desarrolladores web debemos agradecer mucho, ya que nos facilita mucho el día a día.

[button-blue url=”https://www.cursosdesarrolloweb.es/course/curso-react-native-aplicaciones-nativas-reactjs/curriculum/” target=”_blank” position=”center”] Accede al Curso de React Native desde 0[/button-blue]