Qué es React: definición, características y funcionamiento

ReactJS es una de las librerías más populares de JavaScript para el desarrollo de aplicaciones móviles y web. Creada por Facebook, React contiene una colección de fragmentos de código JavaScript reutilizables utilizados para crear interfaces de usuario (UI) llamadas componentes.

Es importante señalar que ReactJS no es un framework de JavaScript. Esto porque sólo es responsable de renderizar los componentes de la capa de vista de una aplicación. React es una alternativa a frameworks como Angular y Vue, que permiten crear funciones complejas.

En este artículo exploraremos las características de React, explicaremos cómo funciona y repasaremos sus beneficios para los desarrolladores de front-end. También cubriremos las diferencias entre ReactJS y React Native con respecto a sus funciones en la industria del desarrollo de aplicaciones web y móviles.

Por último, hablaremos de los pasos para desplegar una aplicación React en el hPanel de Hostinger.

Descarga Glosario Completo de Desarrollo Web

Características de React

React tiene algunas características principales que la hacen destacar de otras librerías de JavaScript. En las siguientes secciones presentaremos estas características y te explicaremos cómo contribuyen al desarrollo de aplicaciones móviles y web.

JSX

JSX es una extensión de la sintaxis de JavaScript utilizada en la creación de elementos de React. Los desarrolladores la emplean para incrustar código HTML en objetos JavaScript. Ya que JSX acepta expresiones válidas de JavaScript e incrustación de funciones, puede simplificar las estructuras de código complejas.

Veamos un bloque de código que muestra cómo incrustar una expresión en JSX:

const name = 'John Smith;
const element = h1>Hola, {nombre}/h1>;
ReactDOM.render(
 element,
 document.getElementById('root')
);

En la segunda línea, llamamos a la variable nombre dentro de un elemento React poniéndola dentro de las llaves. 

Mientras tanto, la función ReactDOM.render() renderiza el elemento React en el árbol del Modelo de Objetos del Documento (DOM), describiendo la UI.

JSX también ayuda a combatir los ataques Cross-Site Scripting (XSS). Por defecto, React DOM convierte los valores incrustados en JSX en cadenas antes de renderizarlos. Por consiguiente, terceros no pueden inyectar código extra a través de la entrada del usuario a menos que esté explícitamente escrito en la aplicación.

Más adelante en el artículo, discutiremos detalladamente el papel de JSX en la creación de componentes React. 

Virtual DOM

El Modelo de Objetos del Documento (DOM) presenta una página web en una estructura de árbol de datos. ReactJS almacena árboles DOM virtuales en la memoria. Al hacerlo, React puede aplicar actualizaciones a partes específicas del árbol de datos, lo que es más rápido que volver a renderizar la totalidad del árbol DOM.

Cada vez que haya un cambio en los datos, ReactJS generará un nuevo árbol de DOM virtual y lo comparará con el anterior para encontrar la forma más rápida de implementar los cambios en el DOM real. Este proceso se conoce como diffing.

Al asegurarse de que la manipulación de la interfaz de usuario sólo afecta a secciones específicas del árbol real del DOM, renderizar la versión actualizada tarda menos tiempo y utiliza menos recursos. Esta práctica beneficia enormemente a los proyectos grandes con una interacción intensa con el usuario.

Componentes y Props

ReactJS divide la interfaz de usuario en piezas aisladas y reutilizables de código conocidas como componentes. Los componentes de React funcionan de forma similar a las funciones de JavaScript, ya que aceptan entradas arbitrarias denominadas propiedades o props.

Los elementos React devueltos determinan el aspecto de la interfaz de usuario en el lado del cliente. Este es un ejemplo de un componente de función que devuelve un elemento React:

function Welcome(props) {
 return h1> Hola, {props.name}/h1>;
}

Es posible tener tantos componentes como sea necesario, sin saturar tu código. 

Gestión de Estado

Un estado es un objeto JavaScript que representa una parte de un componente. Cambia cada vez que un usuario interactúa con la aplicación, renderizando una nueva interfaz de cliente para reflejar las modificaciones.

La gestión de estados se refiere a la práctica de gestionar los estados de la aplicación React. Incluye el almacenamiento de datos en librerías de gestión de estados de terceros y la activación del proceso de re-renderización cada vez que los datos cambian.

Una librería de gestión de estados facilita la comunicación y el intercambio de datos entre los componentes. Actualmente existen varias librerías de gestión de estados de terceros, siendo Redux y Recoil las dos más populares.

Redux

La librería de gestión de estado Redux tiene un almacén centralizado que mantiene el árbol de estado de una aplicación predecible. La librería también reduce la inconsistencia de los datos al evitar que dos componentes actualicen el estado de la aplicación simultáneamente.

La arquitectura de Redux admite el registro de errores para facilitar la depuración y tiene un método de organización de código estricto, lo que simplifica el mantenimiento. Además, cuenta con un gran número de complementos y es compatible con todas las capas de las interfaces de usuario.

Dicho esto, Redux es bastante complejo y, por lo tanto, no es óptimo para aplicaciones pequeñas con una sola fuente de datos.

Recoil

Recoil es una biblioteca de gestión de estados de JavaScript lanzada por Facebook. Emplea funciones puras llamadas selectores para calcular los datos de las unidades actualizables del estado conocidas como átomos. Múltiples componentes pueden suscribirse al mismo átomo y así compartir un estado.

El uso de átomos y selectores evita los estados redundantes, simplifica el código y elimina las repeticiones excesivas de React y de cualquier componente hijo. Recoil es más recomendable que Redux para principiantes, ya que sus conceptos básicos son considerablemente más fáciles de entender.

Navegación programática

La navegación programática se refiere a los casos en que las líneas de código crean una acción que redirige a un usuario. Por ejemplo, las acciones de inicio de sesión y de registro navegan programáticamente a los usuarios a una nueva página web.

React Router, la librería estándar de React para el enrutamiento, proporciona múltiples formas de navegación programática segura entre componentes, sin necesidad de que el usuario haga clic en un enlace.

El uso de un componente Redirect es el principal método de navegación programática, siendo history.push() otro enfoque.

Para resumir, el paquete React Router sincroniza la UI con la URL, lo que permite controlar el aspecto de las aplicaciones React sin depender de los enlaces.

¿Por qué utilizar React?

Cientos de grandes empresas de todo el mundo, como Netflix, Airbnb y American Express, utilizan React para crear sus aplicaciones web. En las siguientes secciones, analizaremos las razones por las que tantos desarrolladores eligen ReactJS sobre sus competidores.

1. Fácil de usar

Los desarrolladores con conocimientos de JavaScript pueden aprender a utilizar React en muy poco tiempo, ya que se basa en JavaScript plano y en un enfoque basado en componentes. Es posible empezar a desarrollar aplicaciones basadas en la web con React tras solo un par de días de estudio.

Incluso si no estás familiarizado con JavaScript, muchos sitios web ofrecen lecciones de programación gratuitas. Una vez que conozcas los fundamentos de JavaScript, lee sobre ReactJS para agilizar el proceso de desarrollo de front-end.

2. Admite componentes Java reutilizables

React te permite reutilizar componentes que han sido desarrollados en otras aplicaciones. Como React JS es de código abierto, es posible pre-construir componentes, lo que reduce el tiempo de desarrollo de aplicaciones web complejas.

Además, React permite anidar componentes entre otros para crear funciones complejas sin inflar el código. Como cada componente tiene sus propios controles, es fácil mantenerlos.

3. Facilita la redacción de los componentes

Gracias a la integración de JSX, es más fácil escribir componentes de React: los usuarios pueden crear objetos de JavaScript combinados con tipografía y etiquetas HTML. JSX también simplifica la renderización de múltiples funciones, lo que mantiene el código sencillo sin reducir las capacidades de la aplicación.

Aunque JSX no es la extensión sintáctica más popular, ha demostrado su eficacia en el desarrollo de componentes especiales y aplicaciones dinámicas.

La herramienta oficial de interfaz de línea de comandos (CLI) de React, llamada Create React App, agiliza aún más el desarrollo de aplicaciones de una sola página. Cuenta con un proceso moderno de configuración de construcción con herramientas preconfiguradas y es excelente para aprender React JS.

4. Alto rendimiento

Como comentamos anteriormente, el virtual DOM permite a ReactJS actualizar el árbol del DOM de la forma más eficiente posible. Al almacenar el virtual DOM en la memoria, React elimina el exceso de re-renderización que puede perjudicar el rendimiento.

Igualmente, el enlace de datos unidireccional de React entre elementos agiliza el proceso de depuración. Cualquier modificación realizada en los componentes hijos no afectará a la estructura padre, lo que reduce el riesgo de errores.

5. Compatible con SEO

React JS puede mejorar la optimización en los motores de búsqueda (SEO) de las aplicaciones web al aumentar su rendimiento. La implementación del DOM virtual es uno de los factores que influyen en una mayor velocidad de las páginas.

Asimismo, React ayuda a los motores de búsqueda a navegar por las aplicaciones web mediante el renderizado del lado del servidor. Esto aborda uno de los problemas más importantes que tienen las páginas web con mucho JavaScript, ya que los motores de búsqueda suelen encontrarlas difíciles y lentas de rastrear.

¿Cómo funciona React?

Una de las mayores ventajas de usar React es que puedes infundir código HTML con JavaScript.

Los usuarios pueden crear una representación de un nodo DOM declarando la función Element en React. El siguiente código contiene una combinación de HTML y JavaScript:

React. createElement("div", { className: "rojo" }, "Texto Hijo");
React. createElement(MyCounter, { count: 3 + 5 });

Habrás notado que la sintaxis del código HTML anterior es similar a la de XML. Dicho esto, en lugar de utilizar la clase DOM tradicional, React utiliza className.

Las etiquetas JSX tienen un nombre, hijos y atributos. Los valores numéricos y las expresiones deben escribirse entre llaves. Las comillas en los atributos JSX representan cadenas, de forma similar a JavaScript.

En la mayoría de los casos, React se escribe utilizando JSX en lugar de JavaScript estándar para simplificar los componentes y mantener el código limpio.

Aquí hay un ejemplo de código React escrito usando JSX:

MyCounter count={3 + 5} />;
var GameScores = {jugador1: 2,jugador2: 5};
DashboardUnit data-index="2">
h1> Scores/h1> Scoreboard className="results" scores={GameScores} />
/DashboardUnit>;

A continuación, se desglosan las etiquetas HTML anteriores:

• MyCounter: representa una variable llamada “count” cuyo valor es una expresión numérica.
• GameScores: es un objeto literal que tiene dos pares de valores prop. 
• DashboardUnit: es el bloque XML que se renderiza en la página.
• scores={GameScores}: es el atributo scores. Obtiene su valor del objeto literal GameScores definido anteriormente.

Una aplicación React suele tener un único nodo DOM raíz. Al renderizar un elemento en el DOM cambiará la interfaz de usuario de la página.

Por ejemplo, el siguiente código muestra “Hola Mundo” en la página, convirtiendo el elemento en un nodo DOM llamado root.

div id="root"> /div>
const element = h1> Hola, mundo/h1>;
ReactDOM. render(element, document. getElementById('root'));

Siempre que un componente de React devuelva un elemento, el virtual DOM actualizará el DOM real para que coincida.

¿Qué pasa con React Native?

React Native es un framework JavaScript de código abierto construido sobre la librería React. Los desarrolladores lo utilizan para crear aplicaciones React multiplataforma para iOS y Android.

React Native utiliza interfaces de programación de aplicaciones (APIs) nativas para renderizar componentes de interfaces de usuario móvil en Objective-C (iOS) o Java (Android). Gracias a ello, los desarrolladores pueden crear componentes específicos para cada plataforma y compartir el código fuente en varias de ellas.

A pesar de tener similitudes, React Native es diferente de ReactJS. Aquí una rápida comparación de React Native y ReactJS:

ReactJS	React Native
Una librería de JavaScript.	Un framework de JavaScript.
Ideal para construir aplicaciones web dinámicas.	Da una sensación nativa a la interfaz de usuario de las aplicaciones móviles.
Utiliza el DOM virtual para renderizar el código del navegador.	Utiliza las APIs nativas para renderizar el código en los dispositivos móviles.
Soporta CSS para crear animaciones.	Requiere la API animada para animar los componentes.
Utiliza etiquetas HTML.	No utiliza etiquetas HTML debido a la falta de soporte de DOM.
Utiliza CSS para el estilo.	Utiliza la hoja de estilos JS para el estilo.

¿Cómo desplegar una aplicación React en Hostinger?

Necesitas alojamiento VPS para hacer pública tu aplicación React. Los planes VPS de Hostinger vienen con acceso root completo y son fácilmente escalables, lo que hace que la implementación y la gestión del servidor sean sencillas y fáciles.

Las siguientes instrucciones te mostrarán cómo desplegar una aplicación React en Hostinger. Asegúrate de tener un nombre de dominio de antemano.

1. Selecciona una plantilla VPS con sistema operativo Ubuntu 22.04 64bit.
2. Utilizando SSH, conéctate al sistema operativo:

ssh root@tu_ip_servidor

3. Instala un servidor node.js y un servidor proxy inverso y asegúrate de haber eliminado Apache2:

sudo apt-get purge apache2*

curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh

sudo bash nodesource_setup.sh

sudo apt update && sudo apt upgrade -y

sudo apt install -y nodejs nginx

4. Para que tu aplicación Next.js funcione correctamente, crea un nuevo archivo de configuración de Nginx:

sudo nano /etc/nginx/sites-available/nextjs

5. A continuación, pega esta configuración en el archivo. Recuerda sustituir tu_ip_servidor por la dirección IP de tu VPS o tu nombre de dominio y guarda los cambios cuando hayas terminado.

server {
  listen 80;
  nombre_servidor tu_ip_servidor;
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

6. Para activar la configuración, tienes que crear un enlace simbólico:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/

7. Reinicia Nginx con este comando:

sudo service nginx restart

8. Sigue los pasos y crea una nueva aplicación Next.js:

cd /var/www

npx create-next-app@latest nextjs

9. Dirígete al directorio de la aplicación Next.js:

cd nextjs

10. Luego, instala las dependencias de la aplicación:

npm install

11. Construye tu aplicación Next.js con este comando:

npm run build

12. Una vez que hayas terminado, inicia tu aplicación Next.js con el siguiente mensaje:

npm start

Tu aplicación Next.js está ahora activa y accesible a través de tu nombre de dominio o dirección IP del VPS.

Utiliza un gestor de procesos como PM2 para reiniciar automáticamente tu aplicación tras un reinicio del servidor o una caída. PM2 también mantiene tu aplicación Next.js ejecutándose en segundo plano en tu VPS. Instala PM2 así:

1. Ejecuta el siguiente comando en tu VPS:

cd ~

sudo npm install -g pm2

2. Ve al directorio de la aplicación Next.js:

cd /var/www/nextjs

3. Utiliza PM2 para iniciar tu aplicación Next.js:

pm2 start npm --name "nextjs" -- start

Asegúrate de que PM2 se inicia al arrancar. Utiliza este comando para generar un script que podrás copiar y pegar en tu terminal:

pm2 startup

Guarda todos los procesos PM2 actuales con este comando:

pm2 save

Conclusión

ReactJS es una librería robusta de JavaScript utilizada en el desarrollo de aplicaciones web dinámicas. Hace que la codificación de JavaScript sea más sencilla, mejora el rendimiento y el SEO de tu aplicación, entre otras ventajas.

ReactJS ayuda a agilizar el proceso de depuración y reduce el riesgo de errores mediante la vinculación de datos en un solo sentido.

A continuación, un resumen de las ventajas de usar React JS:

• Es fácil de usar y aprender, con muchas lecciones de codificación disponibles en línea.
• Admite componentes reutilizables, lo que reduce el tiempo de desarrollo.
• JSX facilita la codificación y la renderización de elementos.
• El DOM virtual elimina el re-renderizado excesivo, asegurando el alto rendimiento de tu aplicación web. 
• React ayuda a los motores de búsqueda a rastrear tu aplicación web, impulsando tu SEO.

Esperamos que la información de este artículo te haya ayudado a entender qué es React JS y sus funciones en el desarrollo web. Si tienes algún comentario o pregunta, déjala en la sección de comentarios de abajo.