¿Qué es React? Guía en lenguaje sencillo para no desarrolladores

React es una biblioteca de JavaScript para crear interfaces de usuario, es decir, la parte de la app que las personas ven y pulsan. Construyes las pantallas con piezas reutilizables llamadas componentes, como un botón, una tarjeta de producto o una página entera, y React mantiene la pantalla sincronizada con tus datos: cuando cambian los datos, React actualiza las partes de la página que dependen de ellos. Nació en Facebook (hoy Meta), es de código abierto y es una de las formas más usadas de crear aplicaciones web.

Por qué importa cuando construyes con IA

Si creas una app web con una herramienta de IA, es muy probable que esté escrita en React. Muchos constructores de apps con IA usan React por defecto, porque es popular, está bien documentado y hay una enorme cantidad de código React del que han aprendido los modelos de IA.

No necesitas escribir React para crear con IA. Pero saber un poco te ayuda a:

• Describir los cambios con precisión. «Cambia el componente ProductCard para que el precio vaya en negrita» es más claro que «haz que los precios destaquen en algún sitio».
• Entender los errores. Mensajes como «Cannot read properties of undefined» o «Too many re-renders» tienen más sentido.
• Tomar decisiones sensatas. Las apps de React puras se renderizan en el navegador, lo que afecta a la visibilidad en buscadores y a la velocidad de la primera carga. Saberlo te ayuda a decidir cuándo pedir otra configuración.
• Trabajar con desarrolladores más adelante. React es una habilidad común, así que un desarrollador suele poder encargarse de una base de código React.

Una analogía cotidiana

Piensa en LEGO. En lugar de tallar un modelo entero de un solo bloque, lo construyes con piezas estándar. Unas pocas piezas forman una rueda; cuatro ruedas y otras piezas forman un coche. Si quieres que todos los coches tengan ruedas rojas, cambias el diseño de la rueda una sola vez.

Los componentes de React son las piezas. Un componente Button se usa dentro de un ProductCard, que se usa dentro de un ProductGrid, que forma parte de la ShopPage. Cambias Button una vez y todos los botones de la app cambian.

La otra mitad de la analogía: imagina que el modelo de LEGO se reconstruye solo cada vez que cambias las instrucciones. Ese es el otro truco de React: describes cómo debe verse la pantalla para los datos actuales, y React calcula qué debe cambiar en la página.

Las ideas básicas

Componentes

Un componente es una función de JavaScript que devuelve un fragmento de interfaz. La documentación de React describe un componente como una parte de la interfaz que tiene su propia lógica y apariencia. Los nombres de los componentes empiezan con mayúscula.

JSX

Los componentes suelen escribirse en JSX, que tiene aspecto de HTML mezclado con JavaScript:

function Greeting() {
  return <h1>¡Bienvenido de nuevo!</h1>;
}

JSX es opcional, pero la documentación de React señala que la mayoría de los proyectos lo usan. Se convierte en JavaScript normal antes de ejecutarse en el navegador.

Props

Las props son los datos que pasas a un componente, como los ajustes de una pieza reutilizable:

<ProductCard name="Vela de lavanda" price={24} />

El mismo ProductCard puede mostrar cualquier producto.

Estado

El estado es información que un componente recuerda y que puede cambiar mientras la app se ejecuta: si un menú está abierto, lo que se ha escrito en un buscador, cuántos artículos hay en el carrito. Cuando el estado cambia, React vuelve a renderizar el componente para que la pantalla coincida.

Hooks

Los hooks son funciones cuyo nombre empieza por use, como useState (recordar un valor) y useEffect (ejecutar código después de renderizar, por ejemplo para cargar datos). Los verás por todas partes en el código React generado por IA.

Un ejemplo práctico: el contador del carrito

Supón que tu tienda online tiene un botón «Añadir al carrito» y un icono de carrito que muestra el número de artículos. En React se vería más o menos así:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Vela de lavanda"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Carrito ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Añadir al carrito</button>
    </div>
  );
}

Lo que ocurre cuando una persona pulsa «Añadir al carrito»:

1. El onClick del botón llama a onAdd, que llama a setCartCount.
2. React actualiza el estado cartCount de 0 a 1.
3. React vuelve a renderizar Shop, pasando count={1} a CartIcon.
4. La página muestra «Carrito (1)». Nadie escribió código que dijera «busca el texto del carrito y cámbialo»: la pantalla sigue a los datos.

Fíjate también en los límites. Este contador vive en la memoria del navegador. Si refrescas la página, vuelve a 0. Para conservar el carrito, habría que guardarlo en un lugar duradero: una cookie, el almacenamiento del navegador o una base de datos a través de tu backend. React se encarga de la pantalla; no guarda tus datos.

Dónde encaja React en una app web

Una app «Vite + React» se renderiza en el navegador (una aplicación de página única). Una app de Next.js puede renderizar primero las páginas en el servidor, lo que ayuda a los buscadores y a la velocidad de la primera carga.

Términos comunes explicados

Errores y malentendidos habituales

• «React es un lenguaje de programación». Es una biblioteca escrita en JavaScript (o TypeScript) y usada desde ellos.
• «React guarda mis datos». El estado vive en el navegador y desaparece al refrescar. Los datos duraderos necesitan un backend y una base de datos.
• Poner secretos en el código de React. Todo lo de una app de React se envía al navegador del visitante. Las claves de API ahí son públicas. Guárdalas en el servidor.
• «Las apps de React no pueden posicionarse». El renderizado solo en cliente es más débil para buscadores, pero el prerenderizado o el renderizado en servidor lo solucionan en gran parte.
• Componentes gigantes. Un componente de 1.000 líneas es difícil de cambiar con seguridad, tanto para personas como para la IA. Pide componentes más pequeños.
• Pensar que una app web de React es una app de móvil. Funciona en el navegador, también en los móviles, pero no es una app de la App Store.

Qué pedir a tu constructor de IA

• «Divide esta página en componentes pequeños y con nombre, e indícame en qué archivo está cada uno.»
• «Haz que el componente ProductCard sea reutilizable, con nombre, precio e imagen como props.»
• «Guarda el carrito en la base de datos para que sobreviva a un refresco.»
• «Guarda todas las claves de API en el servidor; el código de React debe llamar a nuestra propia API.»
• «Añade estados de carga y de error para los datos que vienen del servidor.»
• «Si la visibilidad en buscadores importa en estas páginas, prerenderízalas o usa una configuración con renderizado en servidor.»
• «Explícame en lenguaje sencillo qué significa este error y de qué componente viene.»

Para ver el panorama general, consulta frontend vs backend, y para revisar lo que escribió la IA, cómo revisar código generado por IA.

React en Mythex

Salvo que pidas otra cosa, Mythex empieza los proyectos nuevos con Vite + React + TypeScript + Tailwind, con una vista previa en directo mientras chateas. Puedes indicar otra configuración en tu primer mensaje, por ejemplo «Usa Next.js» o «landing estática en HTML», y Mythex la elige a partir de lo que escribes; no hay una pantalla de ajustes para ello. La página de la documentación sobre cómo se elige la tecnología explica las opciones. El editor de código es de solo lectura en el plan Free; en Pro puedes editar el código React directamente y exportar el proyecto para seguir trabajando en otro lugar.

Preguntas