¿Qué es React?

¿Qué es React y por qué importa?

React es una biblioteca de JavaScript creada por Meta (Facebook) en 2013 y liberada como open source. Su propósito es uno y solo uno: construir interfaces de usuario. No es un framework completo como Angular; React se enfoca exclusivamente en la capa de vista, lo que le da una flexibilidad enorme para integrarse con otras herramientas.

La idea central de React es simple pero poderosa: la UI es una función del estado. En vez de manipular el DOM manualmente cuando los datos cambian, describes cómo debe verse tu interfaz en cada estado posible, y React se encarga de las actualizaciones.

UI = f(estado)

Esta filosofía declarativa cambia completamente la forma de pensar sobre las interfaces. En lugar de decirle al navegador "cambia este elemento, luego actualiza ese otro", simplemente dices "cuando el estado sea X, la UI debe verse así".

El Virtual DOM

Para lograr actualizaciones eficientes, React introdujo el concepto de Virtual DOM: una representación en memoria del árbol de componentes. Cuando el estado cambia, React:

1. Crea un nuevo árbol Virtual DOM con los cambios
2. Lo compara con el árbol anterior (reconciliación o diffing)
3. Calcula el conjunto mínimo de cambios necesarios
4. Aplica solo esos cambios al DOM real

Este proceso es lo que React llama reconciliación. En React 18+ el motor de reconciliación se llama Concurrent Mode y permite priorizar actualizaciones, pausarlas y reanudarlas sin bloquear el hilo principal.

React 19.2 — Las novedades que debes conocer

React 19.2 es la versión estable más reciente y trae cambios que impactan directamente cómo escribirás código día a día:

React Compiler (antes "React Forget")

El React Compiler es una herramienta de compilación que analiza tu código y agrega memoización automáticamente. Antes tenías que usar useMemo, useCallback y React.memo manualmente para evitar renders innecesarios. Ahora el compilador lo hace por ti.

// Sin React Compiler: necesitas memorizar manualmente
const calcularTotal = useMemo(() => {
  return items.reduce((acc, item) => acc + item.precio, 0);
}, [items]);

// Con React Compiler: el compilador optimiza esto automáticamente
const calcularTotal = items.reduce((acc, item) => acc + item.precio, 0);

Server Components

Los React Server Components (RSC) permiten que ciertos componentes se rendericen exclusivamente en el servidor. Esto significa que pueden acceder directamente a bases de datos, sistemas de archivos y APIs sin exponer credenciales al cliente. Frameworks como Next.js 15 y Remix hacen uso extensivo de ellos.

// Este componente solo existe en el servidor
// No se envía JavaScript al cliente
async function ListaProductos() {
  const productos = await db.query('SELECT * FROM productos');
  return (
    <ul>
      {productos.map(p => <li key={p.id}>{p.nombre}</li>)}
    </ul>
  );
}

Actions y el formulario del futuro

Las Actions simplifican el manejo de formularios y mutaciones asíncronas. Junto con useActionState y useFormStatus, permiten gestionar el ciclo completo de envío de formularios de forma declarativa.

El hook `use()`

use() es el hook más versátil de React 19. Puede desenvolver promesas y contextos dentro del render de un componente. A diferencia de await, puede usarse condicionalmente y dentro de bucles.

SPA vs MPA — ¿Cuándo usar cada una?

React puede usarse en dos arquitecturas principales:

Single Page Application (SPA):

• La aplicación carga una sola vez y las navegaciones son virtuales
• Ideal para dashboards, herramientas, aplicaciones con mucha interacción
• Herramienta recomendada: Vite con React
• El enrutamiento ocurre en el cliente (React Router)

Multi Page Application (MPA) con React:

• Cada ruta genera HTML en el servidor (SSR o SSG)
• Excelente SEO y tiempo de carga inicial más rápido
• Herramienta recomendada: Next.js o Remix
• El enrutamiento puede ocurrir en servidor y cliente

Para este curso trabajaremos principalmente con el modelo SPA usando Vite, que es el estándar moderno para aplicaciones React puras.

El ecosistema de React

React tiene un ecosistema rico y maduro. Estas son las herramientas más importantes que encontrarás:

¿Por qué React en 2025?

Con tantas opciones disponibles (Vue, Svelte, Solid, Angular), ¿por qué elegir React?

1. Madurez: 12+ años en producción, miles de empresas lo usan
2. Mercado laboral: La biblioteca más demandada por empleadores
3. Ecosistema: El más amplio de cualquier framework de UI
4. Innovación continua: React Compiler, RSC, Concurrent Mode
5. Transferibilidad: React Native para móviles usa el mismo modelo mental
6. Comunidad: Millones de desarrolladores, tutoriales y paquetes

React no es perfecto. Tiene curva de aprendizaje, no opina sobre muchas decisiones de arquitectura (lo que puede ser abrumador) y el ecosistema fragmentado puede confundir a principiantes. Pero para un desarrollador que domina React, el mundo de oportunidades es enorme.

Configurando tu entorno

Para este curso necesitas:

# Node.js 20+ (recomendado 22 LTS)
node --version

# Crear proyecto React + TypeScript con Vite
npm create vite@latest mi-app -- --template react-ts
cd mi-app
npm install
npm run dev

Esto crea un proyecto moderno con:

• React 19.2
• TypeScript configurado
• Vite como build tool
• Hot Module Replacement (HMR) instantáneo

El modelo mental correcto

Antes de continuar, graba este modelo mental: en React todo es un componente. Un botón es un componente. Una página es un componente. Una aplicación completa es un componente que contiene otros componentes.

Los componentes son funciones que:

• Reciben datos (llamados props)
• Retornan JSX (interfaz de usuario)
• Pueden tener estado interno con hooks

Este modelo simple escala desde un widget de un botón hasta aplicaciones con miles de pantallas. La clave está en aprender a descomponer problemas complejos en componentes pequeños, reutilizables y bien tipados con TypeScript.

En la siguiente lección aprenderás JSX, la sintaxis especial que hace que escribir interfaces en React sea tan natural e intuitivo.