¿Qué es React? Funcionamiento, Características y Ejemplos

React es una biblioteca de JavaScript desarrollada por Facebook (ahora Meta) que se utiliza para construir interfaces de usuario (UI) interactivas y dinámicas. A diferencia de un framework completo, React se enfoca específicamente en la vista, es decir, en cómo se renderiza y actualiza la interfaz de usuario en una aplicación. Su principal objetivo es facilitar la creación de aplicaciones web modernas mediante componentes reutilizables y un enfoque declarativo.

En este artículo, exploraremos qué es React, cómo funciona, sus características principales y cómo se utiliza, con ejemplos prácticos para que puedas entenderlo de manera clara y sencilla.

¿Qué es React?

React es una biblioteca de código abierto que permite crear interfaces de usuario dividiéndolas en componentes pequeños y reutilizables. Cada componente representa una parte de la interfaz, como un botón, un formulario o una lista, y puede tener su propio estado y lógica. Esto hace que el código sea más organizado, fácil de mantener y escalable.

React no se encarga de todo el funcionamiento de una aplicación (como la gestión del servidor o el enrutamiento), sino que se centra en la parte visual. Por eso, es común combinarlo con otras herramientas o bibliotecas para construir aplicaciones completas.

¿Cómo funciona React?

React utiliza dos conceptos clave para funcionar de manera eficiente: la declaratividad y el Virtual DOM.

1. Declaratividad

En lugar de manipular directamente el DOM (Document Object Model, la representación de la página web en el navegador), en React describes cómo debería verse la interfaz en función del estado de la aplicación. Por ejemplo, si tienes una lista de tareas, en lugar de decirle al navegador cómo agregar o eliminar elementos, simplemente describes cómo debe verse la lista en cada momento. React se encarga de actualizar el DOM automáticamente cuando cambian los datos.

2. Virtual DOM

React utiliza una copia ligera del DOM real, llamada Virtual DOM. Cuando el estado de la aplicación cambia, React compara el Virtual DOM anterior con el nuevo para identificar las diferencias. Luego, actualiza solo las partes del DOM real que han cambiado, lo que hace que las actualizaciones sean mucho más rápidas y eficientes.

En un ejemplo, imagina que tienes un árbol con muchas hojas. Si quisieras cambiar el color de solo algunas hojas, sería un desperdicio de tiempo y esfuerzo arrancar todo el árbol y plantarlo de nuevo solo para modificar unas pocas. Eso es exactamente lo que sucede con el Real DOM en un navegador tradicional: cuando algo cambia en la página, todo el DOM se actualiza, lo que puede hacer que la web sea más lenta y menos eficiente.

Aquí es donde entra el Virtual DOM en React. Piensa en él como una copia del árbol que tienes en la memoria. Cada vez que ocurre un cambio en la interfaz, React primero modifica esta versión virtual del árbol y la compara con la versión anterior.

Luego, solo después de analizar qué hojas realmente cambiaron, React actualiza únicamente esas partes en el Real DOM, en lugar de modificar todo el árbol. Esto hace que las actualizaciones sean mucho más rápidas y eficientes.

Diagrama de como es la secuencia del Virtual DOM

En la imagen, vemos esa comparación:

A la izquierda, el Virtual DOM muestra los cambios resaltados.
A la derecha, el Real DOM se actualiza solo en los puntos necesarios.
En el centro, el logo de React representa el proceso de sincronización entre ambos.

Características principales de React

React tiene varias características que lo hacen popular entre los desarrolladores:

1. Componentización

La interfaz de usuario se divide en componentes independientes y reutilizables. Cada componente puede tener su propio estado y lógica, lo que facilita la organización del código y su mantenimiento.

Imagina que estás organizando una fiesta en tu casa. Para que todo salga bien, decides dividir las tareas entre tus amigos: uno se encarga de la música, otro de la comida, alguien más de las bebidas y así sucesivamente. Cada persona tiene una responsabilidad específica y sabe exactamente qué hacer. Si en algún momento necesitas cambiar la música, simplemente hablas con el amigo encargado de esa tarea sin afectar a los demás.

Esta forma de organización es similar a cómo React maneja la componentización. En React, una aplicación se divide en partes más pequeñas llamadas componentes, cada uno con una función específica. Por ejemplo, puedes tener un componente para el encabezado, otro para el menú de navegación y otro para el pie de página. Cada componente es independiente y puede reutilizarse en diferentes partes de la aplicación.

Al igual que en la fiesta, donde cada amigo tiene su tarea y puede trabajar de manera autónoma, los componentes en React funcionan de manera independiente. Si necesitas modificar o actualizar una parte de la interfaz, puedes hacerlo en el componente correspondiente sin afectar al resto de la aplicación. Esto facilita el mantenimiento y la escalabilidad del código, ya que cada componente se centra en una funcionalidad específica y puede desarrollarse, probarse y actualizarse de forma aislada.

2. JSX

JSX es una extensión de JavaScript que permite escribir código similar a HTML dentro de JavaScript. Esto hace que sea más fácil describir la estructura de la interfaz de usuario. Por ejemplo:

function Saludo({ nombre }) {
  return <h1>¡Hola, {nombre}!</h1>;
}

En este ejemplo, el componente Saludo recibe un parámetro (nombre) y muestra un mensaje en la pantalla.

3. Estado y props

Estado: Es un objeto que almacena datos internos de un componente. Cuando el estado cambia, React vuelve a renderizar el componente para reflejar esos cambios.
Props: Son datos que se pasan de un componente padre a un componente hijo. Permiten que los componentes sean dinámicos y reutilizables.

4. Hooks

Los Hooks son funciones que permiten a los componentes funcionales manejar estado y efectos secundarios sin necesidad de usar clases. El Hook más común es useState, que permite agregar estado a un componente funcional. Por ejemplo:

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
    </div>
  );
}

En este ejemplo, useState se utiliza para crear un contador que aumenta cada vez que se hace clic en el botón.

5. Flujo unidireccional de datos

En React, los datos fluyen de componentes padres a componentes hijos a través de las props. Esto hace que sea más fácil entender cómo se mueven los datos en la aplicación y depurar errores.

¿Cómo se usa React?

Para usar React, necesitas configurar un entorno de desarrollo. Aunque en la documentación oficial aún se menciona Create React App, esta herramienta ha quedado atrás y la comunidad ha adoptado Vite como la opción preferida para crear proyectos de React debido a su rapidez y eficiencia.

Pasos para iniciar un proyecto con Vite y React

Instalar Node.js: Asegúrate de tener Node.js instalado en tu computadora.
Crear un proyecto con Vite: Abre tu terminal y ejecuta el siguiente comando:
```
npm create vite@latest mi-primera-app --template react
```
Instalar las dependencias: Navega a la carpeta del proyecto y ejecuta:
```
cd mi-primera-app
npm install
```
Iniciar el servidor de desarrollo:
```
npm run dev
```
Esto abrirá tu aplicación en el navegador.

Escribir componentes en React con Vite

Dentro de la carpeta src, puedes empezar a crear tus componentes. Por ejemplo, crea un archivo llamado Saludo.jsx:

function Saludo({ nombre }) {
  return <h1>¡Hola, {nombre}!</h1>;
}

export default Saludo;

Luego, usa este componente en el archivo App.jsx:

import Saludo from './Saludo';

function App() {
  return (
    <div>
      <Saludo nombre="Juan" />
    </div>
  );
}

export default App;

Por lo tanto, React es una herramienta poderosa y flexible para construir interfaces de usuario modernas. Su enfoque en la componentización, el uso de JSX, el Virtual DOM y los Hooks lo convierten en una opción popular para desarrolladores de todo el mundo. Aunque en la documentación oficial todavía se menciona Create React App, la comunidad prefiere usar Vite debido a su rapidez y mejor rendimiento.