React Native Expo

Introducción a React Native Y Expo

Sergio Alberca Navarro - @sae - Novatec Software Engineering Qué es React Native, sus ventajas, cómo funciona y cómo comenzar a usarlo

Índice

Herramientas y configuración inicial

Recurso Adicionales

¿Qué es React Native?

¿Cómo funciona React Native?

Ejemplo Practico

Expo

Componentes de React Native

Despliegue

Ruegos y preguntas

¿Qué es React Native?

React Native

React Native es un marco para aplicaciones móviles de código abierto creado por Facebook. Se usa para desarrollar aplicaciones para Android, iOS, Web y UWP (Windows) y proporciona controles de interfaz de usuario nativa y acceso completo a la plataforma nativa. Trabajar con React Native requiere un conocimiento de los aspectos básicos de JavaScript.

Caracteristicas

• React Native tiene varias funcionalidades que le ayudan al desarrollador web a construir una buena interfaz de usuario. Una de estas funciones es que es cross platform, es decir, es un framework que se considera multiplataforma. Además, nos da la posibilidad de realizar actualizaciones instantáneas, lo que permite que el usuario no tenga que dirigirse de forma constante a la tienda de aplicaciones de sus dispositivos móviles o de escritorio.
• Es fácil de aprender y leer, debido a que está basado en JavaScript.

• Esta aplicación fue diseñada por Facebook y presentada al público en el año 2015. Existen muchas plataformas en el mercado (y probablemente recurras a ellas en tu día a día) que usan esta aplicación; por ejemplo, Instagram, la app considerada hermana de Facebook. También son aplicaciones React Native: Pinterest, Uber Eats, Walmart, Analytics Facebook, Skype…

Cómo funciona React Native

Módulos/códigos nativos

Arquitectura

Módulos necesarios para que cuando hagamos nuestra RN app no tengamos que preocuparnos de escribir código nativo

Podemos suponer que React Native compila código JS en el correspondiente código nativo directamente. Pero esa empresa es bastante dura de realizar, ya que Java y Objective C/Swift son lenguajes fuertemente tipados mientras que Javascript no lo es. En lugar de eso, RN hace algo más inteligente: React Native es, en esencia, un conjunto de componentes React, donde cada uno de ellos tiene su correspondiente equivalente en views y componentes nativos.

Javascript VM

Es la maquina virtual de Javascript que ejecutará nuestro código JS en los dispositivos

React Native Bridge

Escrito en C++/Java y es responsable de comunicar los hilos de Javascript y de nativo

Componentes Principales

Componentes

View

Es el componente más básico sobre el que heredan la mayoría de los demás componentes. Lo podríamos equiparar a un <div> de HTML.

StyleSheet

Componente en el que añadiremos los estilos del componente

Text

Componente es en el que mostraremos textos.

Componentes

TextInput

Componente para proporcionar un espacio al usuario para que pueda ingresar texto por medio del teclado de su dispositivo.

Image

Componente sirve para mostrar imágenes.

ScrollView

Componente permite establecer un contenedor en el que se podrán almacenar varios componentes que se pueden ir desplazando en la pantalla.

Componentes Personalizados

const CloseButton = ({ action }: Props) => { return ( <TouchableOpacity onPress={action} testID="closeButton"> <View style={styles.button}> <FontAwesomeIcon icon={faXmark} size={30} color={Theme.colors.WHITE} /> </View> </TouchableOpacity> ); }; export default CloseButton

Herramientas de configuracion inicial

Requisitos Previos

• Node.js (versión 12 o posterior) con un gestor de paquetes como npm o Yarn.
• React Native CLI para facilitar la creación, el desarrollo y la gestión de proyectos React Native.
• JVM de Java.
• Para Android: Instalar Android Studio, JVM y Android SDK y posteriormente añadirlos a las variables de entorno y crear un emulador en Android Studio.
• Para IOS: Instalar Xcode y crear un emulador desde el mismo.

Crear un nuevo proyecto

• Para crear un nuevo proyecto utilizaremos el siguiente comando:
• npx react-native init MyReactNativeApp
• Si queremos iniciar el proyecto con alguna version especifica:
• npx react-native@X.XX.X init <projectName> --version X.XX.X
• Para lanzar el proyecto:
• npx react-native run-android

Expo

Expo es un framework para aplicaciones React universales. Se trata de un conjunto de herramientas y servicios construidos alrededor de React Native y de las plataformas móviles que ayudan a desarrollar, construir y desplegar aplicaciones para iOS, Android, pero también aplicaciones Web, utilizando en todos los casos la misma base de código JavaScript/TypeScript con React. Hasta aquí todo muy parecido a React Native... De hecho, cuando escribes código en Expo, estás escribiendo en realidad código React Native. Sin embargo, una de las características más importantes de Expo es que dispone de multitud de funcionalidad nativa expuesta a JavaScript, desde el uso de cámaras o notificaciones hasta la síntesis de voz, pasando por todo tipo de sensores del dispositivo, detección de caras, manejo de vídeo... y casi cualquier cosa que necesites. Esto facilita enormemente el trabajo y aumenta enormemente las capacidades de tus apps móviles con React. Pero además Expo proporciona un montón de herramientas que te permiten desde crear proyectos hasta publicarlos, pasando por la capacidad de ejecutar tus proyectos en el móvil al mismo tiempo que trabajas en ellos, sin necesidad de utilizar para ello Android Studio o XCode. A través de Expo puedes colaborar con otras personas: probando la app, viendo el estado o el histórico del proyecto o incluso contribuyendo al código. Con Expo, tu aplicación se puede compartir fácilmente a través de un enlace o de un código QR, no tienes que enviar todo el archivo .apk o .ipa, y tampoco hay necesidad de compilar para ejecutar la aplicación. Esto facilita muchísimo colaborar con otros desarrolladores o incluso con los clientes.

Instalación y Configuración Inicial

• Prerequisitos: Tener Node y npm/yarn instalados.
• Instalación de Expo CLI:
• npm install -g expo-cli
• Crear un nuevo proyecto con Expo:
• expo init MyNewProject
• Comenzar el proyecto:
• expo start

Despliegue de aplicaciones con EAS

EAS es el acrónimo de Expo Application Services, este es un servicio en la nube que provee una forma fácil y rápida de llevar su aplicación Expo o React Native desde el desarrollo hasta las tiendas de aplicaciones. Expo ofrece este servicio a través de 3 planes, uno gratuito y 2 de pago. Por otra parte, EAS cuenta con 2 características principales: EAS Build: para construir las aplicaciones, tanto para iOS como Android. EAS submit: para enviar las apps construidas hacia las tiendas de aplicaciones.

Creando nuestra primera build

Configuración

Para configurar tu proyecto iOS y/o Android y que sea compatible con EAS Build debes ejecutar el siguiente comando desde el directorio de tu proyecto:eas build:configure Una vez elijas una plataforma, el cligenerará el archivo eas.json

Instalación

Para poder interactuar con los servicios en la nube de EAS desde nuestra máquina local, debemos hacer uso de EAS CLI.

Build

Para iniciar con el build ejecuta el siguiente comandoeas build --platform ios/android

Envio y distribucion

Automatizando el proceso

Hasta ahora hemos visto cómo realizar este proceso de forma manual, sin embargo luego de un par de veces de construir y enviar las aplicaciones desde tu máquina se vuelve una pérdida de tiempo. Por consiguiente, Expo creó un GitHub action para automatizar este proceso directamente desde el repositorio de tu proyecto en GitHub. Ademas EAS es compatible con la integracion de diferetentes plataformas como Azure.

Enviar la aplicación a las tiendas

Una vez finalizado nuestro build, estamos listos para enviarlo a App Store Connect. Para hacer esto ejecuta el comando:eas submit --platform ios/android

Recursos Adicionales

Recursos

Documentación oficial

Comunidades y foros

Cursos y tutoriales recomendados

• React Native

• Expo

• Github

• Expo Forum

• GithubExpo

• Udemy

• Platzi

• CodeAcademy

Ruegos y preguntas

GRACIAS