¿Qué es React? Conceptos clave y diferencias con jQuery

React es una biblioteca de JavaScript para construir interfaces de usuario (UI). Mientras que jQuery se centra en seleccionar y cambiar elementos de la página directamente, React se centra en describir la interfaz para un estado dado de tus datos. Comprender los componentes y el estado facilita comparar las dos herramientas y decidir cuándo usarlas.

¿Qué es React?

En React, construyes partes de una interfaz, como botones, cuadros de búsqueda y tarjetas de artículos, como componentes. Cada componente reúne su apariencia y el comportamiento relacionado. Puedes combinar componentes en una página y reutilizar una tarjeta proporcionando un título y un autor diferentes para cada artículo.

React usa JavaScript, y HTML y CSS siguen siendo útiles para entender la estructura y apariencia de una interfaz web. Instalar React no proporciona automáticamente un servidor de inicio de sesión, una base de datos o navegación entre URLs. Aún necesitas elegir e implementar las otras partes de tu aplicación. Este artículo se centra en una interfaz básica que se ejecuta en un navegador; el inicio rápido oficial de React introduce sus bloques de construcción.

Los conceptos centrales de React

Componentes: unidades de apariencia y comportamiento

Un componente de función es una función de JavaScript que devuelve el contenido a mostrar. Los nombres de los componentes que defines comienzan con una letra mayúscula, como ProductCard, mientras que los elementos HTML como button usan nombres en minúscula. El siguiente componente define una tarjeta una vez para que puedas reutilizar su estructura con diferentes datos de productos.

function ProductCard({ name, price }) {
  return (
    <article className="product-card">
      <h3>{name}</h3>
      <p>KRW {price}</p>
    </article>
  );
}

JSX: expresando marcado dentro de JavaScript

JSX es una extensión de sintaxis que te permite escribir marcado similar a HTML en un archivo de JavaScript. La sección <article> anterior es JSX. Las llaves te permiten insertar expresiones de JavaScript como name y price. Pegar este componente en un archivo HTML ordinario no es suficiente para ejecutarlo.

JSX utiliza className en lugar de class y requiere etiquetas cerradas de manera explícita, como <img />. Múltiples elementos de nivel superior deben estar envueltos en un elemento padre o en un Fragment. JSX es común en ejemplos y proyectos introductorios, aunque React se puede usar sin él. Consulta las reglas de React para escribir JSX para la sintaxis.

Props: datos pasados por un componente padre

Props, abreviatura de properties (propiedades), son valores que un componente padre pasa a un hijo. Permiten que la misma tarjeta muestre diferentes nombres y precios, o que el mismo botón muestre diferentes etiquetas. Una prop puede contener una cadena, número, objeto o función. Aquí hay un producto ilustrativo con precio en won surcoreano (KRW):

<ProductCard name="Beginner keyboard" price={35000} />

Un componente hijo lee sus props para construir su salida. Trata los props como solo lectura: si sus valores necesitan cambiar, actualiza los datos en el padre para que pase nuevos valores. Un componente padre también puede pasar una función de callback para que el componente hijo la llame después de una acción del usuario. Pasar props a un componente explica este flujo de datos.

Estado: recordando valores que cambian

El estado es la información que un componente necesita recordar, como un valor de entrada, una selección o un conteo de clics. Llamar a useState devuelve el valor actual y una función para actualizarlo. useState es un Hook, una función que da a un componente acceso a las funcionalidades de React; llámala en el nivel superior de la función del componente.

const [count, setCount] = useState(0);

El valor inicial es 0, count es el estado actual, y setCount solicita una actualización. Cambiar solo una variable ordinaria no le dice a React que actualice la interfaz. Los valores que impulsan la visualización necesitan una estructura de estado adecuada. Estado: la memoria de un componente explica cómo el estado difiere de una variable local.

¿Cómo actualiza React la interfaz?

En un contador, hacer clic en un botón solicita una actualización de estado. Luego, React calcula la salida para ese estado y aplica los cambios necesarios al DOM. El Modelo de Objetos del Documento (DOM) es la representación de objetos de un documento en el navegador, incluidos sus elementos y texto.

1. Acción del usuario: hacer clic en un botón ejecuta un controlador de eventos.
2. Solicitud de actualización: setCount especifica el siguiente valor.
3. Renderizar: React llama a los componentes para calcular su salida.
4. Confirmación (commit): React aplica los cambios necesarios al DOM.
5. Pintar: el navegador dibuja el resultado.

Renderizar significa calcular la salida llamando a los componentes. No significa recargar toda la página ni eliminar y recrear todos los elementos HTML. Si la salida no cambia, un renderizado puede no necesitar cambios en el DOM. La documentación de React sobre renderizado y confirmación distingue estas fases.

Llamar a setCount no reemplaza inmediatamente el valor de count dentro del manejador de eventos en ejecución. Solicita el estado para una renderización posterior, y React puede agrupar múltiples actualizaciones. Cuando el nuevo valor depende del valor anterior, expresa esa relación con una función actualizadora:

setCount(previousCount => previousCount + 1);

Esta función recibe el estado pendiente y devuelve el siguiente estado. Es útil cuando se encolan varios incrementos, porque cada actualización se calcula a partir del resultado anterior. La referencia useState explica las funciones actualizadoras y sus requisitos.

¿Cuál es la diferencia entre React y jQuery?

jQuery también es una biblioteca de JavaScript. Proporciona selectores, manejo de eventos, cambios en el contenido y estilos, y solicitudes Ajax. Ajax, abreviatura de Asynchronous JavaScript and XML, es una técnica para intercambiar datos con un servidor sin recargar toda la página; los datos intercambiados no necesitan ser XML. La introducción oficial de jQuery enumera la manipulación del DOM y el manejo de eventos entre sus principales características.

Considera agregar un producto a un carrito. Con jQuery, tu código podría insertar un elemento de lista, actualizar la cantidad y el total, y ocultar el mensaje de carrito vacío. Con React, puedes describir estas pantallas en términos del estado del carrito. Ningún enfoque maneja automáticamente errores del servidor o valida todos los datos entrantes.

React no siempre es más rápido, y el código jQuery no siempre es más difícil de mantener. Los resultados dependen de la interfaz, la implementación, el código cargado y las acciones del usuario. Una sola pequeña interacción y una interfaz que sincroniza muchos estados generan diferentes necesidades de mantenimiento, por lo que deben evaluarse en su propio contexto.

Construye el mismo contador con jQuery y React

Ambos ejemplos comienzan en 0 y aumentan el conteo en 1 cada vez que se activa el botón. Sus encabezados identifican la biblioteca; su funcionalidad y diseño son equivalentes por lo demás. Compara dónde cada implementación actualiza el número mostrado. Los ejemplos a continuación fueron comprobados con React 19.3.0, jQuery 4.0.0, Vite 8.3.4, Node.js 24.19.0 y Microsoft Edge 154, incluyendo clics de ratón, activación con teclado y recargas de página.

Ejemplo de jQuery: cambiar el texto de un elemento seleccionado

Guarda el código completo a continuación como jquery-counter.html usando codificación UTF-8, luego ábrelo en un navegador. Carga jQuery 4.0.0 desde la Red de Entrega de Contenido (CDN) oficial, por lo que necesitas una conexión a internet. Consulta las versiones oficiales de jQuery disponibles y los archivos.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery counter</title>
  <style>
body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
  </style>
</head>
<body>
  <main class="counter">
    <h1>jQuery counter</h1>
    <p>Click count: <span id="count" aria-live="polite">0</span></p>
    <button type="button" id="increase">Add 1</button>
  </main>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
    let count = 0;

    $('#increase').on('click', function () {
      count += 1;
      $('#count').text(count);
    });
  </script>
</body>
</html>

$("#increase") selecciona el botón, y .on("click", ...) adjunta el controlador. Después de cambiar la variable, el código llama a $("#count").text(count) para actualizar el texto mostrado. Consulta las referencias de jQuery .on() y referencias de jQuery .text() para esas operaciones.

Los scripts se sitúan después del botón en el código HTML, por lo que los elementos de destino ya existen cuando se ejecuta este ejemplo. Si no cambia nada, verifica la solicitud del CDN y los errores de la consola en las herramientas de desarrollo del navegador, y compara los IDs de los elementos con los selectores. Al adaptar esto a un tema de WordPress, evita cargar la biblioteca dos veces y verifica si $ se refiere a jQuery bajo su configuración noConflict.

Ejemplo de React: actualizar el estado para cambiar la interfaz

Este ejemplo de aprendizaje utiliza la plantilla de JavaScript React de Vite. Vite proporciona un servidor de desarrollo y transforma y construye archivos fuente. Node.js ejecuta estas herramientas en tu computadora, y npm instala paquetes y ejecuta comandos del proyecto. Instala una versión de soporte a largo plazo (LTS) de Node.js que cumpla con los requisitos de Vite para empezar. En octubre de 2026, la guía indica Node.js 20.19+ o 22.12+; también verifica cualquier requisito adicional de la plantilla generada.

1. Abre un terminal en la carpeta donde deseas crear el proyecto. Asegúrate de que no exista ya una carpeta con el mismo nombre.
2. Ejecuta los comandos a continuación para crear la plantilla de JavaScript react e instalar sus paquetes.

npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install

En la primera ejecución, npm puede pedirte que confirmes la instalación de la herramienta de scaffolding. Después de la instalación, reemplaza el contenido de src/App.jsx con el siguiente código. label es una propiedad proporcionada por el componente padre, y count es un estado recordado por el componente.

import { useState } from 'react';

function Counter({ label }) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <main className="counter">
      <h1>{label}</h1>
      <p>Click count: <span aria-live="polite">{count}</span></p>
      <button type="button" onClick={handleClick}>Add 1</button>
    </main>
  );
}

export default function App() {
  return <Counter label="React counter" />;
}

Usa el siguiente código de entrada en src/main.jsx. createRoot conecta la interfaz de React con el elemento HTML con el ID root, y index.css suministra los estilos.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Reemplaza src/index.css con el CSS a continuación para que coincida con el ejemplo de jQuery. El reemplazo App.jsx no importa App.css, por lo que los estilos de componente predeterminados de la plantilla no interfieren con este diseño.

body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }

El index.html del proyecto debe contener <div id="root"></div> y el script del módulo que carga src/main.jsx. Mantén esta estructura del template de Vite y usa lang="en" para el documento en inglés. Inicia el servidor de desarrollo:

npm run dev

Abre la dirección local que se imprime en la terminal. Generalmente es http://localhost:5173, pero se puede usar un puerto diferente si ese puerto está ocupado. Detén el servidor con Ctrl+C en la terminal. Si los cambios no aparecen, verifica que guardaste el archivo y que estás trabajando en el proyecto correcto. Los errores de JSX aparecen en la terminal o en la pantalla de errores del navegador.

El manejador de React no selecciona el elemento numérico ni reemplaza su texto. La expresión JSX {count} conecta la salida al estado, y setCount solicita un nuevo estado. En ambos ejemplos, recargar la página restablece el contador a 0 porque no se implementa ningún almacenamiento. Estos ejemplos ilustran los patrones de actualización; no son una prueba comparativa de rendimiento.

¿Cuándo deberías elegir React o jQuery?

Agregar una pequeña función a una página existente

Un botón que alterna un elemento o un pequeño menú puede ser sencillo con jQuery. Si la página existente ya depende de jQuery, mantener esa estructura puede reducir el alcance del cambio. También considera si las APIs estándar del DOM son suficientes. No es necesario una nueva dependencia para cada pequeña interacción.

Construyendo una interfaz con estados conectados

Vale la pena considerar el modelo de componentes y estados de React cuando los mismos datos afectan una lista de productos, filtros y totales del carrito, o cuando interfaces similares aparecen repetidamente. Aún necesitas decidir qué componente posee cada estado y cuándo deben actualizarse los datos del servidor. Adoptar React por sí solo no garantiza un buen diseño.

Agregando React a parte de un sitio existente

No necesitas reconstruir todo el sitio para usar React. Puedes montar un componente dentro de un elemento específico y mantener el resto de la página en su forma existente. La guía oficial para agregar React a un proyecto existente describe la configuración y el alcance.

Si React y jQuery comparten una página, dales límites claros para la propiedad del DOM. Agregar o eliminar arbitrariamente elementos hijos gestionados por React puede desincronizar el DOM real con la vista de React. Un plugin que manipula el DOM necesita una integración que gestione su inicialización y limpieza dentro del ciclo de vida apropiado. Consulta la guía de React sobre la modificación del DOM que gestiona para estas limitaciones.

Antes de adoptar una herramienta, considera la complejidad del estado de la interfaz, los componentes que puedes reutilizar, la experiencia en JavaScript de tu equipo y la configuración de desarrollo y despliegue. Una página pequeña con una dependencia existente de jQuery tiene necesidades diferentes a una nueva aplicación interactiva. Después de aprender los conceptos básicos de HTML, CSS y JavaScript, ejecutar estos contadores proporciona una comparación concreta entre cambiar elementos directamente y describir una interfaz a través del estado.