¿Qué es React y cómo funciona realmente?

ReactJS es una de las librerias 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 la construcción de la interfaz de usuario (UI) llamados 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.

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, {name}/h1>;
ReactDOM.render(
 element,
 document.getElementById('root')
);

En la segunda línea, llamamos a la variable name 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. 

DOM virtual

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 usuario 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 de React. 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 interfaz 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 librería 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 nuevas páginas.

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?

Interfaz de la plataforma 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 ReactJS 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.

Homepage de la aplicacion Create React App

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 ReactJS.

4. Alto rendimiento

Como comentamos anteriormente, el DOM virtual permite a ReactJS actualizar el árbol del DOM de la forma más eficiente posible. Al almacenar el DOM virtual 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. SEO amigable

ReactJS 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 los sitios web con mucho JavaScript, ya que los motores de búsqueda suelen encontrarlos difíciles y lentos 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 = {player1: 2,player2: 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 DOM virtual 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 interfaz 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:

ReactJSReact 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?

Hacer pública tu aplicación React requiere un servidor de alojamiento para desplegarla. Al igual que al lanzar un sitio web, puedes hacerlo adquiriendo un plan de hosting.

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. Abre el archivo package.json de tu aplicación React y coloca los pares clave-valor que aparecen a continuación dentro del primer corchete. En este ejemplo, el valor de la clave homepage es la ruta a la página de inicio de la aplicación.
{
"name": "hostinger-react",
"homepage": "http://midominio.com",
"version": "1.0.0",
"description": "mi aplicación react",
  1. Navega al Administrador de Archivos desde el hPanel. Crea un archivo .htaccess en la carpeta public_html y añade el siguiente código. Este archivo te servirá como su paquete de construcción.
Options -MultiViews
   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^ index. html [QSA,L]
  1. Si tienes un alojamiento VPS, te recomendamos instalar Node.js y Node Package Manager (NPM). Ejecuta el script npm run build para crear un paquete de construcción y súbelo a la carpeta public_html.
  2. Elimina el archivo index.html de su carpeta raíz.
  3. Escribe la URL de la página de inicio de la aplicación React en tu navegador web para desplegarla.

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 razones por las que puedes querer utilizar React:

  • 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 el contenido de este artículo te haya ayudado a entender 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.

Author
El autor

Deyimar A.

Deyi es una entusiasta del marketing digital, con experiencia en diseño de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo de SEO & Localization de Hostinger. En su tiempo libre, le gusta desarrollar proyectos, leer un libro o ver una buena película.