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

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

Por qué importa cuando creas con IA

Si creas una web con una herramienta de IA, hay muchas probabilidades de que esté escrita en React. Muchas herramientas de creación de apps con IA usan React por defecto, porque es popular, está bien documentado y existe una enorme cantidad de código de 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 una configuración distinta.
• Trabajar después con desarrolladores. React es una habilidad habitual, así que un desarrollador puede entender con facilidad un proyecto en React.

Una analogía cotidiana

Piensa en LEGO. En lugar de tallar un modelo entero en un solo bloque, lo construyes con piezas estándar. Unas pocas piezas forman una rueda; cuatro ruedas y algunas 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 cambian todos los botones de la app.

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 parece HTML mezclado con JavaScript:

function Greeting() {
  return <h1>Welcome back!</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 ajustes de una pieza reutilizable:

<ProductCard name="Lavender Candle" 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 de React generado por IA.

Un ejemplo práctico: un contador del carrito

Imagina que tu tienda online tiene un botón de «Añadir al carrito» y un icono del 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="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

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

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Lo que ocurre cuando un cliente pulsa «Add to cart»:

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 «Cart (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 sus límites. Este contador vive en la memoria del navegador. Si recargas la página, vuelve a 0. Para conservar el carrito, habría que guardarlo en algún sitio duradero: una cookie, el almacenamiento del navegador o una base de datos a través de tu backend. React gestiona la pantalla; no guarda tus datos.

Dónde encaja React en una aplicación web

Una app «Vite + React» se renderiza en el navegador (una aplicación de una sola página). Una app de Next.js puede generar 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 comunes y malentendidos

• «React es un lenguaje de programación». Es una biblioteca escrita y usada desde JavaScript (o TypeScript).
• «React guarda mis datos». El estado vive en el navegador y desaparece al recargar. 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». La renderización solo en el cliente es más débil para buscadores, pero el prerenderizado o el renderizado en servidor lo soluciona en gran medida.
• 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.
• Creer que una web en React es una app de móvil. Funciona en el navegador, también en móviles, pero no es una app de la App Store.

Qué pedir a tu creador de apps con IA

• «Divide esta página en componentes pequeños 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 una recarga.»
• «Mantén 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 procede.»

Para ver el panorama general, consulta frontend y backend, y para revisar lo que escribió la IA, cómo revisar el 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 prompt, por ejemplo «Usa Next.js» o «una página de inicio en HTML estático», 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 gratuito; en Pro puedes editar el código de React directamente y exportar el proyecto para seguir trabajando en otro lugar.

Preguntas