Qué es React y por qué

Antes de escribir código, vale la pena entender qué problema resuelve React y por qué se volvió el estándar para construir interfaces. Con esta base, todo lo que veas después tendrá sentido.

Concepto

El problema: sincronizar datos y pantalla

Imagina un carrito de compras hecho con JavaScript puro. Cada vez que agregas un producto tienes que:

1. Actualizar el arreglo del carrito.
2. Actualizar el contador del ícono.
3. Recalcular y mostrar el total.
4. Agregar la fila a la lista.
5. Habilitar el botón "Pagar".

// JavaScript "imperativo": tú dices CÓMO cambiar cada parte del DOM
const carrito = []

function agregar(producto) {
  carrito.push(producto)
  document.querySelector('#contador').textContent = carrito.length
  const total = carrito.reduce((s, p) => s + p.precio, 0)
  document.querySelector('#total').textContent = `$${total}`
  const li = document.createElement('li')
  li.textContent = producto.nombre
  document.querySelector('#lista').appendChild(li)
  document.querySelector('#pagar').disabled = false
  // ...y si olvidas actualizar algo, la pantalla queda inconsistente
}

En una app grande, con decenas de lugares que dependen de los mismos datos, esto se vuelve un caos.

La solución de React: declarativo

Con React describes cómo debe verse la interfaz para cierto estado, y React se encarga de actualizar el DOM:

// React "declarativo": describes QUÉ mostrar según los datos
function Carrito({ productos }) {
  const total = productos.reduce((s, p) => s + p.precio, 0)

  return (
    <section>
      <span>{productos.length} productos</span>
      <ul>
        {productos.map((p) => (
          <li key={p.id}>{p.nombre}</li>
        ))}
      </ul>
      <strong>Total: ${total}</strong>
      <button disabled={productos.length === 0}>Pagar</button>
    </section>
  )
}

Cuando productos cambia, React vuelve a ejecutar la función y actualiza sólo lo que cambió. Analogía: en lugar de darle instrucciones paso a paso al pintor ("mueve el pincel 3 cm a la izquierda"), le muestras la foto de cómo quieres la pared y él decide cómo pintarla.

Las tres ideas clave

1. Componentes: la interfaz se divide en piezas reutilizables (Boton, TarjetaProducto, Navbar). Cada una es una función que devuelve lo que se debe mostrar.
2. Estado: los datos que cambian (lo que hay en el carrito, si un menú está abierto). Cuando el estado cambia, el componente se vuelve a dibujar.
3. Flujo de datos en un sentido: los datos bajan de padres a hijos mediante props. Es predecible y fácil de depurar.

             <App />
            /       \
     <Navbar />    <Tienda productos=[...] />
                    /                \
     <ListaProductos />          <Carrito />
          |
   <TarjetaProducto /> × N

¿Qué es el Virtual DOM?

Modificar el DOM real es relativamente costoso. React mantiene una representación ligera de la interfaz en memoria (el Virtual DOM). Cuando el estado cambia:

1. Genera un nuevo árbol virtual.
2. Lo compara con el anterior (reconciliación o diffing).
3. Aplica al DOM real sólo los cambios mínimos.

Tú nunca tocas el DOM directamente: describes el resultado y React optimiza.

React vs alternativas

	React	Vue	Angular	Svelte
Tipo	Librería de UI	Framework progresivo	Framework completo	Compilador
Sintaxis	JSX	Plantillas HTML	Plantillas + TypeScript	Plantillas
Curva	Media	Suave	Pronunciada	Suave
Ecosistema y empleo	El más grande	Grande	Grande (empresas)	Creciendo

React es "sólo" la capa de interfaz: para rutas, estado global o peticiones eliges librerías (lo verás en este curso). Si prefieres algo más integrado, mira Vue. Para sitios con SEO y backend incluido usarás Next.js, que está construido sobre React.

Novedades de React 19

React 19 (diciembre de 2024) y sus versiones menores trajeron:

• Actions y hooks como useActionState, useFormStatus y useOptimistic para formularios.
• El hook use para leer promesas y contexto.
• ref como prop normal (ya no hace falta forwardRef).
• Soporte para <title> y <meta> dentro de los componentes.
• React Compiler: optimiza automáticamente (menos useMemo/useCallback manuales).
• Server Components (los usarás en Next.js).

Ejemplo: React sin instalar nada

Para ver React en acción, guarda esto como index.html y ábrelo en el navegador. (Es sólo para experimentar; en la siguiente lección crearás un proyecto real con Vite.)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primer React</title>
</head>
<body>
  <div id="root"></div>

  <script type="module">
    import React, { useState } from 'https://esm.sh/react@19'
    import { createRoot } from 'https://esm.sh/react-dom@19/client'

    // Sin JSX (el navegador no lo entiende sin compilar), usamos createElement
    function Contador() {
      const [clics, setClics] = useState(0)
      return React.createElement(
        'button',
        { onClick: () => setClics(clics + 1) },
        `Clics: ${clics}`
      )
    }

    createRoot(document.getElementById('root')).render(React.createElement(Contador))
  </script>
</body>
</html>

Cada clic cambia el estado y React actualiza el texto del botón. Nota que nunca usamos textContent ni querySelector para actualizarlo.

Buena práctica

Piensa en componentes desde el diseño: mira una página y divídela en cajas. Cada caja que se repite o tiene una responsabilidad clara es un candidato a componente.

Error común

Pensar que React reemplaza a JavaScript. React es JavaScript: map, filter, desestructuración, módulos y funciones flecha se usan en cada línea. Si algo de eso te cuesta, repasa JavaScript antes de seguir.

Ejercicios

1. Toma una página que uses a diario (YouTube, Amazon, Instagram) y dibuja su árbol de componentes: al menos 3 niveles.
2. Modifica el ejemplo HTML para que el botón muestre "¡Llegaste a 10!" cuando el contador llegue a 10 y se deshabilite.

Ver solución

1. Ejemplo para YouTube:

<App>
├── <Header>
│   ├── <Logo />
│   ├── <BarraBusqueda />
│   └── <MenuUsuario />
├── <Sidebar>
│   └── <ItemMenu /> × N
└── <PaginaVideo>
    ├── <Reproductor />
    ├── <InfoVideo> (<BotonLike />, <BotonSuscribir />)
    ├── <Comentarios> → <Comentario /> × N
    └── <Recomendados> → <TarjetaVideo /> × N

function Contador() {
  const [clics, setClics] = useState(0)
  const llego = clics >= 10
  return React.createElement(
    'button',
    { onClick: () => setClics(clics + 1), disabled: llego },
    llego ? '¡Llegaste a 10!' : `Clics: ${clics}`
  )
}

Resumen

• React es una librería para construir interfaces declarativas basadas en componentes.
• Describes cómo se ve la UI según el estado; React actualiza el DOM por ti (Virtual DOM).
• Los datos fluyen de padres a hijos con props.
• React 19 agrega Actions, use, ref como prop y el React Compiler.