Code Development Technology

React vs React Native 

Hablando de React sabemos que es una tecnología de código abierto, creada y mantenida por Facebook con el objetivo de estandarizar y volver más accesible la manipulación del “Document Object Model” (DOM), con el uso de javascript, React vió la luz en el año 2013, desde entonces ha sido un referente en el avance tecnológico del desarrollo web del lado del Frontend, recibiendo actualizaciones constantes, soporte de herramientas comunes, inclusión en frameworks y dependencias.  Volviéndolo así una de las opciones más atractivas cuando toca elegir un camino en cuanto al desarrollo de páginas web del lado del cliente. 

Fuente: https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png

El potencial de React 

Es bien sabido que el potencial de React radica en su exponencial uso a nivel global en el desarrollo, lo que simplifica enormemente las tareas cuando se tratan de un soporte o resolver bugs, sus puntos más importantes son: 
 

  • Curva de aprendizaje: El aprendizaje de react resulta bastante intuitivo y con el suficiente soporte en cuanto a documentación para poder iniciar a desarrollar, además de haber una gran cantidad de contenido de apoyo para su entendimiento, a eso se le suma el hecho de que sus herramientas básicas realmente son sencillas y te guían en el proceso. 
  • Herramientas: Cuando se trata de depurar aplicaciones y obtener apoyo de herramientas externas, hay una alta cantidad de opciones para tener en cuenta, como lo es por ejemplo la extensión de Google llamado “React Developer Tools” 
  • Programación orientada a componentes: La versatilidad de React es uno de sus puntos a favor más sólidos, ya que permiten el uso modular del código, existiendo la posibilidad así de administrar y mejorar el rendimiento de una aplicación, dando incluso la posibilidad de usar un mismo componente en distintos proyectos u entornos. 
  • Comunidad: El material de apoyo con React es bastante amplio, existe una comunidad que tiene a disposición muchos recursos y bibliotecas que extienden e incluso aceleran el aprendizaje junto al desarrollo. 

Hay estadísticas que avalan la superioridad en el mercado de React a diferencia de sus alternativas más comunes, por ejemplo, según BuiltWith en base a las librerías de javascript usadas en todo el internet, React está presente en el 10.08% de los website, más abajo se encuentra Vue con un 0.89% y mucho más abajo se encuentra Angular con un 0.25%.   Estos datos son basados en el año 2024 del mes de octubre. 

Decidir entre React y React Native 

Aunque parezca confuso ya que ambos comparten el mismo nombre prácticamente, la verdad es que el objetivo es que React es una librería de Javascript dirigida a crear interfaces de webs, en base a componentes, mientras que React Native con la misma lógica dirigida a construir una aplicación móvil de forma nativa, con el uso de Javascript.   Básicamente ambos comparten en su mayoría la misma lógica y estructura, pero a la hora de exportarse y construir el código usan distintos ambientes y alcanzan distintos objetivos.    En resumen, React va dirigido al desarrollo web y React Native se enfoca en las aplicaciones móviles. 

Fuente: https://unsplash.com/photos/a-person-holding-a-cell-phone-in-their-hand-P4Re6GIzp9Q   

La creación de React Native le suma mucha versatilidad al desarrollo, ya que en la actualidad es bien sabido que el uso de los teléfonos van en aumento y son una herramienta casi indispensable en cuanto a comunicación por su portabilidad y accesibilidad, complementar un proyecto del lado del cliente usando React y React Native, puede crear un entorno de gran escala teniendo como base los mismos esquemas, agilizando los procesos de desarrollo al compartir componentes, hook, helpers e incluso estilos. 
 
 
El ejemplo más claro y práctico se ve en cómo se inicializa el desarrollo en ambos casos: 
 

 
React: de la mano con Nextjs con el uso de “npx create-next-app@latest”, el compilado funcionaría de la siguiente forma (Existiendo ya un app.tsx en la raiz de la carpeta “app” y el código de a continuación siendo una ruta de “page”). 

import React from 'react';  



export default function Page() {

return (

<div classname="bg-primary">

<p>Open up App.js to start working on your app!</p>

</div>

);

}

React Native: De la mano de Expo con el uso de “npx create-expo-app@latest”, el compilado funcionaría de la siguiente forma. 

import { StatusBar } from 'expo-status-bar'; 

import { StyleSheet, Text, View } from 'react-native';



export default function App() {

return (

<View style={styles.container}>

<Text>Open up App.js to start working on your app!</Text>

<StatusBar style="auto" />

</View>

);

}



const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

});

El camino correcto 

Realmente React native no es más que un complemento del compilador de React, entonces lo correcto es decir que no compiten, en su lugar se complementan ambos en distintas áreas, demostrando así que el camino del desarrollo frontend, busca la simplicidad en la creación de UI (Interfaz de Usuario), de la mano con la componetización en el desarrollo, apuntando a la reutilización de código, recortando los tiempos de desarrollo en los proyectos. 

Es bueno tener en cuenta también que al aprender el funcionamiento y la lógica que usa React para el desarrollo, se puede perfeccionar exitosamente el desarrollo de React Native, así que la curva de aprendizaje es bastante baja, lo que hace que sea una opción atractiva para el desarrollador y el proyecto en cuestión. 

Autor: Estefano Chacón

en_USEN