Original article: React.js vs React Native – What's the Difference?

¿Son lo mismo React.js y React Native?

Si eres nuevo en el mundo del desarrollo web y móvil, quizás te estés preguntando lo mismo.

Como novato, es fácil asumir que React.js y React Native son lo mismo. Después de todo, ambos tienen "Reaccionar" como parte de su nombre.

Aunque React.js y React Native tienen mucho en común, son diferentes entre sí. En este artículo, explicaré tanto React.js cómo React Native, luego enumeraré sus similitudes y diferencias. Al final de este artículo, tendrás un conocimiento claro de ambas herramientas y para qué tipo de aplicaciones se suelen usar.

Para tener una idea clara de la diferencia entre React.js y React Native, primero debemos sumergirnos en cómo se renderiza un sitio web en un navegador.

Cómo se renderizan o representan los sitios web: HTML, CSS y JavaScript

Cuando escribes la URL de un sitio web en la barra de direcciones de tu navegador y haces clic en Intro, el navegador solicita el sitio web y el servidor web envía un archivo HTML al navegador.

El archivo HTML contiene el contenido de la página web y los archivos vinculados, como imágenes, videos y hojas de estilo. El navegador web analiza el archivo HTML y crea un modelo de objeto de documento (DOM), que es una estructura similar a un árbol que contiene los elementos de la página (por ejemplo, botones, párrafos, enlaces, etc...).

El navegador inicia las solicitudes de los archivos vinculados y los descarga al ordenador. Luego analiza los archivos vinculados, como CSS y JavaScript, y aplica el estilo al contenido, haciéndolo más presentable para el usuario. Después de descargar todos los archivos, el navegador muestra el contenido en la pantalla.

El navegador también ejecuta cualquier código JavaScript para que la página sea interactiva. Por ejemplo, si el usuario completa la información incorrecta en un formulario, se puede usar JavaScript para insertar un elemento <div> en la página que muestre un mensaje de error al usuario.

Sin embargo, uno de los mayores problemas de insertar elementos en el DOM con JavaScript es que el código no es reutilizable. Por ejemplo, si deseas insertar el mismo botón en la página, pero con diferentes colores de fondo, debes crear el elemento dos veces en JavaScript:

let blueBtn = document.createElement("button").style.backgroundColor("blue")
let redBtn = document.createElement("button").style.backgroundColor("red")

// Inserta en la página un botón azul y uno rojo

Este es solo un ejemplo simple. Con interfaces de usuario complejas, puedes imaginar lo largas y confusas que pueden llegar a ser las cosas. React fue desarrollado para resolver este problema al hacer que el proceso de creación de aplicaciones web sea mucho más organizado e intuitivo.

¿Qué es React.js?

Técnicamente hablando, ReactJS es una biblioteca front-end de código abierto JavaScript para crear interfaces de usuario o componentes de interfaz de usuario. En términos simples, esto significa que puedes usar React para crear todas las partes de un sitio web que el usuario puede ver y con las que puede interactuar en la ventana de su navegador.

Entonces, ¿Cuál es la diferencia entre usar JavaScript simple y React? Bueno, React hace que el proceso de diseño de la interfaz de usuario sea mucho más fácil. Te permite crear elementos que puedes reutilizar fácilmente en otras partes del sitio web o la aplicación.

Con JavaScript, tal y como mencioné anteriormente, deberás escribir el mismo código dos veces para crear el mismo botón con diferentes colores, lo que podría generar complejidad en proyectos grandes.

La arquitectura de componentes de React resuelve este problema de manera brillante. Con React, defines una sola pieza de la interfaz de usuario, digamos un botón, como un componente.

const Button (props) => {
	return (
    	<div>
        	<button style={props.color}>Submit</button>
        </div>
    )
}

El componente en este caso es una función que devuelve una sintaxis similar a HTML llamada JSX, que define la presentación y el aspecto del componente en el navegador web.

Ahora, digamos que quieres usar el mismo botón (pero con diferentes colores) en varios lugares de tu sitio web. En lugar de crear cada botón desde cero con diferentes propiedades de color (como lo harías con JavaScript), con React, simplemente usas el mismo elemento <Button> y en props pasas un color diferente a cada uno de ellos creando variaciones del mismo botón.

<Button color="red" />
<Button color="blue" />
<Button color="green" />

Este método hace todo simple y lo mantiene organizado, que es toda la esencia de la biblioteca React.js.

Otro beneficio de usar React para el desarrollo de UI es la separación de preocupaciones. Esto significa que los datos utilizados en un componente existen por separado de la lógica, que existe por separado de la capa de vista.

Aquí hay un ejemplo:

const Button (props) => {
	// datos de los componentes
    const [btnText, setBtnText] = useState("Submit")
    
    // lógica de los componentes
    function onClick() {
    	setBtnText("Submitted!")
    }
    
	return (
    	// vista de los componentes
    	<div>
        	<button style={props.color}>{btnText}</button>
        </div>
    )
}

Como puedes ver aquí, el estado, la lógica y la presentación de un componente están separados entre sí, lo que hace que los componentes de React UI sean más fáciles de entender y componer.

Para concluir, React es una biblioteca de JavaScript diseñada para simplificar el proceso de creación de la interfaz de las aplicaciones web.

¿Qué es React Native?

Aquí están las principales diferencias entre ReactJS y React Native:

  • React JS se utiliza para crear la interfaz de usuario de las aplicaciones web (es decir, aplicaciones que se ejecutan en un navegador web)
  • React Native se utiliza para crear aplicaciones que se ejecutan en dispositivos iOS y Android (es decir, aplicaciones móviles multiplataformas)
  • React usa HTML, CSS y JavaScript para crear interfaces de usuario interactivas. React Native, por otro lado, utiliza componentes de interfaz de usuario nativos y APIs para crear aplicaciones móviles.

Tanto React JS como React Native comparten la misma sintaxis. React Native se creó como una forma para que los desarrolladores creasen aplicaciones móviles multiplataformas utilizando su conocimiento existente de herramientas de desarrollo web como HTML, CSS, JavaScript y la biblioteca principal de React.

De hecho, algunas de las bibliotecas que se usan comúnmente junto con React para desarrollar aplicaciones web también tienen una versión móvil para crear aplicaciones en React Native, por ejemplo, Axios, Bootstrap CSS y Tailwind CSS.

Estas son las cosas que React DOM y React Native tienen en común:

  1. Ambos usan la misma biblioteca principal de React.
  2. Ambos utilizan la misma arquitectura basada en componentes, lo que significa que los desarrolladores pueden dividir sus aplicaciones en piezas más pequeñas y manejables.
  3. Ambos usan JavaScript como lenguaje de programación y JSX como lenguaje de plantillas.
  4. Tanto React DOM como React Native usan DOM virtuales para representar sus aplicaciones.
  5. Tanto React DOM como React Native también usan las mismas técnicas y componentes de estilo, aunque React Native es un poco diferente.
  6. Ambos utilizan Chrome DevTools para depurar aplicaciones.
  7. Utilizan las mismas APIs de JavaScript.
  8. Ambos fueron desarrollados en Meta. React fue desarrollado por un ingeniero de software llamado Jordan Walke, mientras que React Native nació de una hackathon.

Conclusión

Este artículo exploró las diferencias entre React DOM y React Native, dos herramientas populares de JavaScript. React DOM se usa principalmente para el desarrollo web, mientras que React Native se usa para el desarrollo móvil.

React DOM usa HTML, CSS y JavaScript para el diseño y el estilo, y permite a los desarrolladores crear interfaces de usuario interactivas. React Native, por otro lado, utiliza componentes de interfaz de usuario nativos y APIs para crear aplicaciones móviles multiplataforma.