React Native actualmente es una de las bibliotecas más populares para crear apps moviles multiplataforma, es decir el poder crear apps para Android y iOS, e incluso mucho más (Aplicaciones de Escritorio y Web) usando una sola base de codigo, todo esto usando Javascript por supuesto.
Y aunque React Native podria parecer una biblioteca simple, en realidad hay mucho más que conocer alrededor de esta, ya que puedes encontrar Frameworks encima de React Native, Bibliotecas de funcionalidades, Bibliotecas de interafces de usuario (UI), y Servicios de la nube que se integran muy bien, y que puedes unirlos a React Native para crear aplicaciones de todo tipo.
Asi que con la idea de ponerte al día en todo esto, o darte un resumen de lo que podrias llegar a aprender en desarrollo movil con esta bibliotea, vamos a hablar de todo lo que esta relacionado a React Native en 2024.
Pero primero para aquellos que no lo conocen veamos un resumen rápido de que es React Native.
¿Qué es React Native?
React native es una biblioteca desarrollada por Facebook en el 2015 con la idea de poder crear aplicaciones nativas usando una sola base de código, y en donde el objectivo principal era usarlo en el desarrollo de la aplicación movil de Facebook, de hecho este proyecto fue impulsado por el exito que estaba teniendo React, la biblioteca que Facebook habia desarrollado para crear interfaces web, por aquel entonces.
Ahora React native y React no son lo mismo, aunque si tiene relacion, React es una bilioteca para crear interfaces web, es decir tipicamente lo puedes encontrar siendo usada en paginas, web y plataformas sociales, como Facebook, Instagram, multiples redes social y en casi toda la web porque es la biblioteca de Javascript mas popular actualmente, mientras que React Native es la variacion de React especificamente para crear aplicaciones moviles nativas principalmente, lo que significa que usa los mismos conceptos bases de React como componentes con JSX, tener Hot Reload, y el poder integrarse con Typescript, pero dedicado a crear aplicaciones moviles.
Piensalo asi, tu tienes a Javascript para crear aplicaciones web, encima esta React, que permite crear las interfaces graficas de una forma mas facil, y encima de React esta react native que usa muchos conceptos de react pero con componentes nativos del sistema operativo de moviles.
Y como React usa un lenguaje basado en XML y Javascript, llamado JSX, este codigo se puede convertir a componentes visuales de otros sistemas, por ejemplo escribes un input de html, y este puede ser equivalente a un input de Android, o input de iOS o traducirlos incluso a aplicaciones de escritorio para Windows o Mac, De hecho la aplicacion de Messenger de escritorio esta desarrollada con React native siguiendo esta idea.
¿Como empezar a estudiar React Native?
Para aprender a usar React native es necesario saber React, y para saber React es necesario saber Javascript.
Y esta secuencia no es recomendable que la saltes o te sera mas complicado crear apps moviles.
De hecho esta idea hace que quede muy claro que React native, al publico al que apunta son desarrolladores de aplicaciones web que ya conocen algo del desarollo de aplicaciones y ahora quieren crear Apps nativas para android y ios, haciendo que el transicionar de web a app sea muy facil.
Para crear proyectos de REact native, hay un comando que genera proyectos llamado React native Community CLI, usandolo puedes crear un proyecto de React native desde cero, sin nada de paquetes extras, usando a partir de alli tendras que instalar bibliotecas adicionales para poder crear multiples pantallas, necesitas instalar paquetes para tener interfaces ya estilizadas, instalar paquetes para solicitar datos y tambien muchas veces necesitaras configurar codigo en gradle para que funcione en Android o cambiar la configuracion del archivo Podfile para que funcione tambien en ios
Es decir, actualmente usar React Native a este punto, es como usar React con Vitejs, en el sentido que vitejs solo te da un proyecto base, y no tiene funcionalidades hechas sino que lo complementas con paquetes de npm, bueno lo mismo es en React Native con este CLI, porque tambien te permite crear una app basica, pero no te ofrece interfaces estilizadas, ni formas de cambiar entre multiples pantallas, ni iconos, ni ninguna interfaz estilizada, todo lo tienes que complementar con bibliotecas de npm, sin embargo al igual que en React actualmente la propia documentacion recomienda usar frameworks como Nextjs para crear aplicaciones actuales de React, la documentacion de React native tambien recomienda usar un Framework que esta por encima de React Native llamado Expo, y la razon de esto es simple, facilita mucho el desarrollo de React Native.
¿Qué es Expo?
Expo es el Framework más importante de React Native, y la razon es que le añade mas funcionalidades de las que trae React native por defecto, por ejemplo usando Expo ya tiene una forma de crear multiples pantallas, incluso inspirado en el enrutador de Nextjs, cuando creas una carpeta se crea automaticamente una pantalla, esto se llama el expo Router.
En versiones anteriores se tenia que configurar manualmente un paquete llamado React navigation, pero expo ya lo configura por ti, por lo que es una opcion mas simple. de hecho a esta forma de crear pantallas se le llama File-based routing
Lo otro es que tambien tiene su propio commando o CLI (Command Line Interface) llamado Expo CLI, que te permite crear el proyecto rapidamente, en incluso ya puedes iniciar un proyecto configurado con Typescript, lo que te recomiendo uses mucho si quieres obtener ayuda de autocompltado, correcion de errores, y una configuracion mas rapido con la que empezar a crear tu proyecto.
estos comandos te permiten ejecutar un servidor para que a medida que vas haciendo cambios se vayan viendo reflejados en pantalla, lo que se llama Hot Reload.
Aunque lo mas util que ofrece Expo, son los paquetes que ofrece, es decir expo no solo sirve para generar proyectos sino que tiene un conjunto de paquetes de todo tipo para poder añadir facilidades rapidamente para crear apps, por ejemplo expo tiene paquetes:
Sensores, archivos del sistema, red, bateria y mucho más, en donde todos estos forma para de lo que expo llama Expo SDK.
Esto permite extender lo poco que ofrece React native con funcionalidades ya probadas, volviendolo un framework más solido, aunque por supuesto estos no siempre son suficientes por lo que tambien hay una web por parte de la comunidad en donde estan todos los paquetes registrados de React native y sus frameworks llamada React Native Directory y alli puedes ver muchos paquetes que soportan expo o paquetes que solo funcionan con React native sin frameworks. Es como un npmjs.com pero proyectos solo de react native.
Y por supuesto aqui hay muchos paquetes y es muy dificil saber si todos son utiles, asi que lo que hare es ir listandoles algunos de estos y los que pueden ir considerando estudiar si quieren profundizar mas.
Los primeros que deben conocer son las UI Libraries de React native.
UI Libraries de React Native
Ya sea que crees proyectos solo con React Native o usando Expo, siempre estos vienen sin estilos, por lo que si quieres desarrollar rapido es buena idea usa bibliotecas que ya te dan botones navegaciones, avatars, dropdown, listas, ya estilizadas y que permitan ser personlizables, para esto estan las llamadas UI LIbraries
hay muchas y cada una ofrece un diseño distinto, entre estas podemos encontrar a:
Y en realidad muchas otras más, pero dos bibliotecas que te recomendaria ver este año es Tamagui la cual te ofrece componentes con estilos, temas, y que estan optimizados tanto para Android y iOS.
Y la otra seria Natiwind, que es un proyecto que permite usar clases de Tailwind en React native, lo que significa que si usas mucho React con Tailwind en la web, vas a poder transladar lo que ya conoces de los nombres de clases y demas reglas tambien para crear una Apps moviles nativas.
State Management
Pero no todo son estilos porque en una App mucha veces se necesita que un dato este ar en varias partes de la interfaz y como todos son componntes en React, tendras el mismo asunto de compartir un estado. Y es aqui donde puedes usar biblitoecas para manejar estado.
De hecho React ya posee un hook que permite compartir el estado llamado Context API, pero usar bibliotecas simplifica mucho esto, en mi caso uso mucho Zustand, al ser simple de instalar y empezar a compartir datos solo creando un archivo.
Pero otras opciones viables tamben son Jotai, Mobx, Recoil y por supuesto Redux, aunque esta ultima es mas complicada de inicializar en un proyecto.
Fetch
Luego tambien esta las bibliotecas que nos permiten obtener datos, de por si React native tambien te permite usar Fetch, o puedes instalar axios, pero una biblioteca que yo creo que puedes añadir para optimizar mucho las peticiones, es React tanstack Query, esta permite guarda en memoria cache datos para que carguen mas rapidos, hacer peticione en paralelo, hacer pre-fetching o guardar datos offline, ademas que podras escribir el codigo de una forma mas simple al momento de cargar datos.
Storage
En cuanto a alamacenaje de datos dentro del propio dispositivo del usuario hay varias opciones en React native, algunas populares son:
- [Sqlite]
- [Async Stoarge]
- mmkv desarrollada por Weechat, que es un modulo escrito en C++ de alto rendimiento y que soporta funciones asincronas.
Aunque por supuesto esto solo sirven para pocos datos que el usaurio necestes guardar rapidamente, o que sea en modo offline, pero cuando se trata de enormes cantidades de datos, o quieres ir actualizando datos que vienen de otro sistemas, vas a tener que conectar tu app movil,
Servicios de Backend as a Service
Los servicios de Backend as a Service hay muchos pero los que mas puedes considerar son dos:
- Firebase
- Supabase
Ambos son servicios que te ofrecen una base de datos en producción, alamacenaje de archivos, te permitira autenticar usuarios facilmente, adema que te permite tener conexion en tiempo real y en resumen te evita que como desarrollador de aplicacion movil tengas que aprender de desarrollo de aplicaciones backend.
Muchas aplicaciones de las tiendas de aplicaciones los usan, y es algo muy comun usarlas para crear tus proyectos reales.
Graficos o Diagramas
Animations
Error reporting
https://docs.bugsnag.com/platforms/react-native/react-native/ https://docs.sentry.io/platforms/react-native/
Otros Proyectos relacionados a React Native
consideraciones importantes de React Native
Por supuesto puedes llegar a crear una aplicacion exitosa usan React Native, pero no todo es enteramente bueno:
- Experiencia de Desarrollo lenta, debido al diseño del Framework, se tiene que hacer una traduccion dle lenguaje por lo que en desarrollo significa que esto siempre debe hacerse
- Componentes desfasados de la comunidad, muchas veces encontraras paquetes que estan desfasados y que muchas veces necesitaras desarrollar tu mismo si realmente necesitas una funcionalidad adaptada a tus necesidades.
- Rendimiento no es comparable al de una aplicacion netamente nativa. REact native se vende como una solucion nativa pero en realidad hay una parte de la aplicacion que traduce tu codigo a codigo de javascript para que se pueda comunicar componentes nativos, lo que significa que no es exactamente nativo, sin embargo esto es un tema que es mas el propio diseño del framework
Ahora descontando todo esto es obvio que es una buena opcion para crear proyectos multiplataforma, pero algo que deben tener en cuenta es que si llegan a crear una aplicacion exitosa, para tener un mejor rendimiento o una mejor Experiencia de desarrollo es muy probable que necesitaran desarrollar sus apps nativas o migrarlas, esto de hecho es muy comun, y muchas empresas usan los desarrollos de apps multiplataforma como la forma rapida de llevar su proyecto a cabo y cuando ya tienen una base e usuarios solidas migran para ofrecen mejores caracteristicas.
Aun asi ustedes tienen siempre la ultima palabra asi que escogan tomando en cuenta todas sus necesidades del proyecto.