Introducción
En este articulo vamos a hablar sobre las diferencias entre React y React Native. También sobre cómo se puede convertir una app React en una app de React Native.
Primero hablemos brevemente sobre React. React es una biblioteca de JavaScript que se utiliza para crear interfaces de usuario. Fue lanzado inicialmente por Facebook en 2013. React utiliza un concepto de DOM virtual para representar cómo debería verse su interfaz de usuario mientras cambia el estado de su aplicación.
React Native es un framework para dispositivos móviles que se utiliza para crear aplicaciones móviles con JavaScript. Utiliza la biblioteca React para construir los componentes de la interfaz de usuario y definir la lógica de negocio de una aplicación. Fue lanzado también por Facebook, en 2015. Una característica novedosa que proporciona React Native es la recarga en vivo que te permite ver los cambios realizados en el código inmediatamente. Esta función ha estado disponible en el desarrollo web durante algún tiempo, pero en el ámbito del desarrollo móvil, era un concepto nuevo.
Similitudes
Ambos usan React.
Tanto las interfaces de usuario para las aplicaciones React en la web como las de React Native tendrán la misma estructura general de JavaScript con pros, state y todos los métodos de React de ciclo de vida de los componentes. Puedes usar las mismas bibliotecas de administración de estado (por ejemplo, Redux) en React Native como lo harías para React en la web.
JSX
React Native usa JSX como lenguaje de plantillas en el método de renderización del componente para definir la interfaz de usuario. Aunque los componentes base utilizados en React Native no son elementos DOM (como <div> por ejemplo), usa la misma sintaxis, ya que es todo JSX.
Depuración del navegador
El código JavaScript en React Native generalmente se analiza en el motor JavaScript de un dispositivo, llamado JavaScript Core. Sin embargo, si habilitas el modo de depuración en un simulador móvil, podrás ejecutar JavaScript a través del motor JS de un navegador y, por lo tanto, tendrás acceso a herramientas como las herramientas de depuración de Chrome. Esto te permite usar console.log() y leer la consola de un navegador. También puedes inspeccionar las solicitudes XHR que se realizan y, si estás utilizando Redux, también puedes aprovechar las herramientas de desarrollo de Redux.
Package.json
Todas las dependencias de JavaScript se pueden administrar con yarn o npm y verás todas esas dependencias en un fichero package.json. Esto te permite usar los paquetes de NPM y las dependencias tan populares como lodash, date-fns y immutable. Sin embargo, cualquier dependencia que se base en HTML, SVG o el lienzo del navegador no se podrá utilizar con React Native.
Diferencias
Componentes base
React Native viene con un conjunto de componentes integrados que se pueden usar para representar elementos de la interfaz de usuario en la página. Estos son diferentes que el estándar <div>, <p>, <input>, y otros elementos DOM que se utilizan con React en la web. Algunos de los componentes de React Native son <Text>, <View>, <TextInput>, y <Image>. Por supuesto, hay muchos otros y también hay algunos componentes de terceros que se puede descargar desde NPM.
Estilos
El estilo no se realiza con CSS en React Native, sin embargo, la sintaxis es bastante similar. Para aplicar estilos en React Native, se crea un objeto StyleSheet y se aplica al atributo style de un componente . La propiedad y los valores usados en el objeto StyleSheet son similares a los que encontrarías en CSS, pero el nombre usa camelCase y también faltan muchas características en los estilos React Native que de otra manera encontrarías en CSS normal.
Navegación
React Native tiene 2 opciones populares para implementar la navegación nativa en una aplicación: React Navigation y React Native Navigation. Nombres muy originales ;)). Personalmente, React Native Navigation es la solución que prefiero yo, ya que utiliza la API de navegación nativa real asociada con iOS y Android, mientras que la implementación de React Navigation se realiza exclusivamente en JavaScript.
Honestamente, incorporar las librerías de navegación en React Native puede ser doloroso cuando se trata de enrutamiento anidado complejo y estilizar los elementos relacionados con la navegación no siempre es fácil. Implementar la navegación en las aplicaciones web de React es mucho más sencillo.
Código específico de la plataforma
React Native puede detectar en qué plataforma se ejecuta una aplicación (iOS o Android) y ofrecer un conjunto diferente de código basado en esa plataforma. Esto se puede hacer ya sea mediante la separación de los componentes de React en archivos que terminan en ios.js y android.js o se puede hacer usando el módulo Platform que se incluye con React Native.
Runtime de JavaScript
React Native ejecuta su código de JavaScript a través del núcleo de JavaScript del dispositivo, a menos que la aplicación se esté ejecutando en modo de depuración, en cuyo caso el motor de JavaScript del navegador ejecuta el código de JavaScript.
React Native se ejecuta en 2 subprocesos diferentes. El hilo principal es responsable de representar la interfaz de usuario y recibir gestos del usuario, mientras que el hilo de JavaScript es responsable de definir la estructura de la interfaz de usuario y de manejar la lógica de negocio de la aplicación.
La arquitectura de React Native es bastante interesante y puedes encontrar muchas buenas charlas en YouTube de los desarrolladores de Facebook hablando sobre el funcionamiento interno de React Native. Aquí hay dos charlas que vale la pena ver si estás interesado en aprender más: una, dos .
Pasos a seguir
Para convertir una app de React de web en una aplicación de React Native tienes que seguir los siguientes pasos:
- Crear una aplicación de React Native desde cero. Para eso hay que ejecutar los comandos como «npx react-native init SampleProject» o para un proyecto de Typescript «npx react-native init SampleProject –template react-native-template-typescript«
- Quitar los ficheros css de todos los archivos. Tienes que eliminar todos los import ‘simple.css’ o require (‘simple.css’) en todos los ficheros. React Native utiliza otro sistema de estilos.
- Convertir los componentes de React en los componentes de React Native. React Native usa sus propios componentes y tenemos que cambiar los componentes de DOM a los componentes de React Native.
- Crear los estilos para componentes. Tienes que crear los objetos StyleSheet que se utiliza en el mundo de React Native para estilizar las vistas.
const styles = StyleSheet.create({ container: { flex: 1, padding: 24, backgroundColor: "#eaeaea" }, title: { marginTop: 16, paddingVertical: 8, borderWidth: 4, borderColor: "#20232a", borderRadius: 6, backgroundColor: "#61dafb", color: "#20232a", textAlign: "center", fontSize: 30, fontWeight: "bold" } });
- Cambiar las librerías de navegación a las de React Native. Existe la versión de React Router para React Native: React Router Native. También existen las librerías React Navigation y React Native Navigation.
- Si el código de React utiliza de alguna forma la API de Node.JS (fs,os,Path etc) o utiliza los objetos como window() o history(), hay que cambiar el código según el contexto para utilizar la API de React Native.
Conclusiones
En general, creo que es bastante fácil convertir una aplicación de React en una de React Native. También existen algunas diferencias importantes. Sí es cierto, que React Native no tiene una comunidad de desarrolladores tan grande como la comunidad que rodea a las aplicaciones web, por lo que no es sorprendente que no haya tantas librerías para React Native. Además la depuración del código en React Native puede ser difícil en ocasiones, lo que puede ser la causa de cierta frustración.
Aunque React Native es posiblemente la mejor herramienta para aplicaciones móviles híbridas (multiplataforma), todavía queda un camino para recorrer. Las aplicaciones nativas aprovechan la mejor manera posible las capacidades de móviles, pero la diferencia entre una aplicación nativa y una aplicación híbrida cada vez es menor.