Desarrollo de aplicaciones para Android e iOS usando React Native con Expo

EXPO! ¿En qué se diferencia Expo de React Native? ¿Debo comenzar mi proyecto con Expo? Muchas preguntas surgen en la mente de los novatos cuando quieren comenzar el viaje de desarrollo de aplicaciones.

Pero tienes suerte porque has aterrizado en el lugar correcto. Haré todo lo posible para explicar todo de una manera simple.

Según la documentación oficial de React Native, se utiliza para:

“Build native mobile apps using JavaScript and React”.

Déjame desglosarlo por ti

React Native es un marco que nos ayuda a crear aplicaciones (tanto para Android como para iOS) utilizando una única base de código JavaScript. Permite un desarrollo más rápido ya que un desarrollador solo necesita saber javascript para desarrollar ambas aplicaciones (iOS y Android).

Aprenda una vez, escriba en todas partes

Este marco utiliza la biblioteca React.js, una de las palabras más discutidas en el mercado actual. Ahora, puede surgir una pregunta: ¿cuál es la diferencia entre React y React Native? La respuesta es que React Native usa componentes nativos con JSX, una extensión de JavaScript que se parece a HTML, mientras que React usa componentes web.

Los componentes nativos de React, como la vista y el texto, se comportan como componentes web ‘div’ y ‘span’. El estilo en React Native te da la sensación de CSS. La única diferencia es que, en React Native, los nombres de los campos se escriben en CamelCase (por ejemplo, tamaño de fuente) en lugar de estilo discontinuo (por ejemplo, tamaño de fuente). Da la sensación de escribir aplicaciones web.

¡Esperar! Esto puede plantear otra cuestión de aprender React.js antes de React Native. ¡Yo diría que no! Tu puedes empezar. Comencé mi viaje de React Native sin el conocimiento de React.js, pero sí, es necesario tener algunos de los conocimientos básicos de los componentes de React como JSX, componentes, estado y accesorios.

Espero que tengas algunas fotos de React Native. Ahora exploremos el mercado que está usando React Native. Hay muchas aplicaciones populares que se crean con React Native como Facebook, Uber, Skype, Instagram… ¡y tal vez algún día su aplicación pueda aparecer en esta lista!

Ahora, exploremos qué es Expo. ¿En qué se diferencia de React Native?

Según la documentación oficial de la Expo,

“Expo let you build native iOS and Android apps by writing JavaScript”.

Si observa la definición de React native, ambas definiciones son similares. Expo está haciendo lo que hace React-Native. Ambos nos permiten crear aplicaciones nativas (iOS y Android) usando javascript, pero hay una diferencia. Puede pensar que Expo nos está ayudando a acelerar el desarrollo de aplicaciones React-Native.

Las aplicaciones Expo son en realidad aplicaciones React-Native. La única diferencia es que Expo viene con su SDK (Expo SDK) que nos brinda servicios como notificación automática, inicio de sesión de Facebook y Google en solo unas pocas líneas de código. Nos permite comenzar nuestro proyecto en un minuto. No necesitamos Xcode (para iOS) ni un estudio de Android (para Android) para comenzar. Entonces, es más fácil empezar.

Ahora, quizás se pregunte por qué diablos comenzaría mi viaje con React Native. Usaré la Expo. Pero hay una cita de Brom

“Everything comes with a price”.

Expo es bueno para empezar, pero tiene algunas desventajas. Hagamos una lista de las ventajas y desventajas de una Expo.

ventajas:

1. La configuración del proyecto es muy fácil y se puede hacer en minutos.
2. Compartir aplicaciones es fácil (usando el código QR y el enlace). Puede publicar su aplicación usando el comando ‘publicar exposición’ y puede compartir ese enlace. No es necesario compilar .apk (para Android) y .ipa (para iOS).
3. Expo puede compilar tanto .apk como .ipa muy fácilmente.
4. Proporciona servicios como Facebook, inicio de sesión de Google, notificaciones automáticas que puede integrar fácilmente en su aplicación sin esforzarse tanto.

Desventajas:

1. La mayor desventaja a la que me enfrenté fue el tamaño de apk o ipa. Sí, la aplicación básica ‘hola mundo’ tiene entre 20 y 25 MB de tamaño. La razón son las bibliotecas integradas.
2. No puede usar módulos nativos escritos en Java/Objective-C.

¡Eso es todo! Se trata de React Native con Expo.

¡Esperar! sabemos lo que es Expo. ¿Cuál es su relación con React Native pero cómo configurar el proyecto con Expo, por dónde empezar? Aquí están las respuestas a sus preguntas.

Comencemos con la configuración de su primer proyecto React Native con Expo.

Suponiendo que haya instalado NodeJS (si no, siga este enlace ). Ahora, instale la utilidad de línea de comando expo-cli usando npm:

npm install -g expo-cli

Esto instalará expo-cli en su máquina. Antes de continuar, me gustaría hablarles sobre las dos partes principales:

La primera parte es una expo-cli. Es una herramienta que nos ayuda en nuestro proceso de desarrollo, como en la configuración de nuestro proyecto, en la creación de APK o IPA, etc. La segunda parte es la aplicación cliente Expo que debemos instalar en nuestro teléfono Android o iOS para escanear el código QR ( que puede obtener usando el comando ‘expo start’) que abrirá un proyecto en nuestro teléfono Android o iOS. ¡Confundido!

Si no lo consigues. Está bien, voy a explicarlo paso a paso.

Después de instalar expo-cli, creemos su proyecto usando:

expo init myApp

Le preguntará acerca de elegir una plantilla. Vaya con el espacio en blanco presionando enter. También puede explorar el segundo con ejemplos. En este momento, vaya con el espacio en blanco y luego siga los dos comandos a continuación para ejecutar su proyecto.

cd myApp 
expo start

Esto generará un código QR.

Código QR generado

El siguiente paso es instalar la aplicación cliente Expo. La aplicación del cliente Expo se puede instalar usando Play Store (para Android) y App Store (para iOS) en su teléfono.

Ahora es el momento de ejecutar su primera aplicación React Native usando Expo. Puede ver su primera aplicación escaneando el código QR (que se generó en su terminal) utilizando una aplicación de cliente Expo (que ha instalado en su teléfono Android o iOS). En Android, tan pronto como escanee, compilará/empaquetará su proyecto para ejecutarlo en su dispositivo.

Se está llevando a cabo la agrupación del proyecto. La aplicación se ejecutará en su dispositivo después de completar el proceso de agrupación.

¡Esperar! Puede pensar de la misma manera que puede ejecutar en su dispositivo iOS, lo cual de alguna manera es correcto, pero el escaneo del código QR se realiza con una cámara. (La función QR Scan se eliminó en Expo para iOS). Simplemente abra su cámara y tan pronto como escanee, aparecerá una notificación-> abra su aplicación en la Expo. Haga clic en él, comenzará a compilar/empaquetar su aplicación para ejecutarla en su dispositivo iOS.

Haga clic en la notificación, comenzará el proceso de agrupación.

¡Viva! ha ejecutado con éxito su primera aplicación utilizando Expo.

¿No es un proceso fácil? Puede modificar su código de app.js y ver la recarga automática de su aplicación una vez que guarde sus cambios.

¡Gracias por leer!