Como en la mayoría de los lenguajes de programación, también en React Native vamos a incluir librerías para poder trabajar.
Cuando creamos un proyecto a través de Expo, la librería React Native es instalada e incluida por medio de la directiva import en nuestro archivo principal App.js. Así mismo, en cuanto empecemos a desarrollar nuestra aplicación móvil verás que tendremos que incorporar la librería React para continuar y darle funcionalidad.
Aunque parece obvio el uso de estas librerías a veces no sabemos cómo funcionan, de manera breve y concreta te explico su propósito, entrar en detalle haría largo, tedioso y complicado este contenido, sin embargo, trataré de dejar claro su uso y funcionalidad.
LIBRERÍA REACT
Definición: import React from 'react';
Una de las características que React nos proporcionará, es la de poder crear la interfaz de nuestras aplicaciones móviles por medio de la creación de componentes, que son conocidos como componentes-react, sin embargo, debes saber que React hará mucho más que esto, pues tiene la encomienda de llevar a cabo la actualización de los estados en tiempo real de estos componentes-react cuando se interactúa con ellos durante la ejecución de nuestra aplicación móvil.
Adicionalmente, cuando estemos creando la interfaz de nuestras aplicaciones móviles, también tendremos la posibilidad de utilizar algunos Hooks de React. Los Hooks de React son funciones que precisamente nos van a permitir darle la funcionalidad a los componentes-react más allá de simplemente crearlos y devolverlos.
Uno de los principales Hooks básicos que vamos a utilizar en nuestro código, por muy pequeño que este sea, es useState.
USESTATE
A través de este Hook podremos asignarle un estado de inicio a una variable, actualizarla y saber el último estado que guarda.
Aunque poco a poco vamos a ir viendo en la práctica algunos de los hooks que React tiene incorporados, no está por demás que guardes en tus favoritos esta página oficial de React para futuras consultas.
Página Oficial de React: https://reactjs.org/
Sección de Referencia de la API de los Hooks: https://reactjs.org/docs/hooks-reference.html
LIBRERÍA RACT NATIVE
Definición: import { StyleSheet, Text, View } from 'react-native';
Con la librería de React Native vamos a poder diseñar la apariencia y comportamiento de la interfaz haciendo uso de sus propios componentes de diseño.
En este caso, React Native tiene la encomienda de llevar a cabo el renderizado de los componentes React de nuestra aplicación usando elementos nativos de la interfaz de usuario, esto quiere decir, que cuando visualicemos nuestra aplicación a través de un emulador o dispositivo móvil, en tiempo real, React Native creará las vistas para Android e iOS según corresponda.
Conforme vayamos avanzando en la programación, también iremos viendo algunos de los componentes de diseño que trae consigo React Native, y al igual que React, no está por demás que guardes en tus favoritos la página oficial de React Native para futuras consultas.
Página Oficial de React Native: https://reactnative.dev/
Sección de Coponetes de React Native: https://reactnative.dev/docs/intro-react-native-components
OTRAS LIBRERÍAS
Por otro lado, también existen librerías creadas por terceros y archivos creados por nosotros que vamos a referenciar e incluir por medio de esta declarativa import.
Es importante hacer la siguiente aclaración. Este trabajo que hacen la librerías React, React Native y de terceros, son exclusivamente llevadas a cabo durante el proceso de desarrollo, ya que una vez concluidos nuestros proyectos tenemos que compilarlos para obtener los paquetes específicos que contarán con el código nativo de cada plataforma Android e IOS, mismos que podrán ser instalados directamente en los dispositivos o ser publicados en las tiendas de aplicaciones correspondientes para que desde ahí puedan ser descargados e instalados.
Veamos en el siguiente video ejemplos del uso correcto de la directiva import y sus variantes.
VER MI PROYECTO REACT NATIVE A TRAVÉS DEL DISPOSITIVO MÓVIL
El propósito del video es hacer más claro el concepto, por los que no es indispensable hacer la prueba de funcionamiento a través de nuestro dispositivo móvil, sin embargo, si quieres ir viendo los resultados a través de tu dispositivo móvil, te sugiero descargues la app Expo Go desde la tienda de aplicaciones de Android e IOS.
Una vez que tengas instalada y abierta la aplicación en tu dispositivo móvil, en tu ventana de comandos de Windows, dentro del proyecto, ingresa la instrucción expo start para ejecutar la aplicación.
EN ANDROID:
Dentro de la aplicación Expo Go tienes la posibilidad de escanear el código QR que te aparecerá en la ventana de comandos de windows. Una vez escaneado, espera a que cargue la aplicación.
EN IOS:
A través de la cámara o lector de códigos que por defecto tienen los dispositivos móviles IOS, puedes escanear el código QR que te aparecerá en la ventana de comandos de windows. Una vez escaneado el código QR permite la ejecución de la aplicación Expo Go y espera a que cargue la aplicación.
Cada vez que crees o actualices un archivo en el proyecto, automáticamente la aplicación que visualizas a través de tu dispositivo móvil se actualizará.
Si esto no ocurre, o en el mismo dispositivo móvil te aparece la leyenda que indica que no se han podido renderizar las actualizaciones, es necesario que cierres la aplicación Expo Go y la inicies nuevamente para volver a escanear el código QR.
Para que esto no te suceda con frecuencia, solo tienes que crear una cuenta gratuita como desarrollador en Expo y vincular con tu dispositivo móvil la cuenta para evitar estas desconexiones.