¿Qué es React?

Una página con un botón que cuenta clics necesita mantener el número sincronizado con cada clic. En JavaScript puro, agarras el nodo de texto del botón, añades un listener de clic, y actualizas el número manualmente cada vez que alguien hace clic. Suma un filtro de búsqueda, un total del carrito de compras, y un modal que se abre y cierra, y de repente tienes un montón de actualizaciones manuales esparcidas por el código, cada una un lugar donde un bug puede colarse cuando los datos cambian en otro lado de la página.

React es una librería de JavaScript para construir interfaces de usuario a partir de componentes, y se encarga de ese trabajo manual por ti. Este capítulo explora qué significa eso en la práctica: la idea fundamental detrás de React, dónde se ejecuta, y cómo encaja en la pregunta de librería versus framework que surge temprano para la mayoría de la gente que la aprende.

Componentes y la idea fundamental

Acá está ese mismo contador de clics escrito como un componente de React:

import { useState } from 'react'

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  )
}

Este ejemplo usa algunas cosas que no has visto todavía: el marcado dentro de return es JSX, useState es un hook, y onClick es un manejador de eventos. Los capítulos Componentes y JSX cubren ese marcado, Estado cubre useState completamente, y Eventos cubre onClick, así que toma la sintaxis como dada por ahora y sigue la forma de la idea en cambio.

count es el estado. El JSX retornado por Counter describe qué debe mostrar el botón para ese estado. Hacer clic en el botón llama a setCount, que actualiza count, y React re-renderiza el botón para que coincida. Nunca tocas el texto del botón directamente. Lo describes de nuevo para el nuevo valor, y React trabaja para determinar qué cambió en la página.

Esa es la idea fundamental que está bajo cada componente de React: describes la UI como una función de tus datos, normalmente llamada estado, y React se encarga de actualizar el DOM para que coincida. Un componente es una función que retorna un pedazo de UI, y una app es un árbol de componentes combinados juntos, todos funcionando de la misma manera que el contador de arriba.

El contraste que vale la pena nombrar con precisión es declarativo versus imperativo. El código imperativo, manipulación pura del DOM, expone los pasos: encuentra este elemento, cambia su texto, añade esta clase. El código declarativo, lo que un componente retorna, expone el estado final: dados estos datos, así es como debe verse el botón. React lleva a cabo los pasos en el medio.

Esos pasos corren a través de un virtual DOM: una representación ligera en memoria de la UI que React construye a partir de lo que tus componentes retornan, compara contra la versión anterior, y usa para trabajar cuál es el conjunto más pequeño de cambios reales del DOM necesarios. Existe, y está bien dejarlo de lado por ahora. No lo creas, lo leas, o lo gestiones directamente; es el mecanismo interno de React para la mitad "hacer que el DOM coincida" del modelo.

Eso deja un modelo mental que vale la pena mantener para el resto de este handbook: UI = f(state). Un componente es una función de sus datos, y hooks, re-renders, y efectos están todos construidos sobre esa única idea. La mayoría de lo que más adelante parece un concepto separado de React es realmente una consecuencia de este.

Dónde se ejecuta React

React se ejecuta principalmente en el navegador, renderizando componentes al DOM. Ese es el entorno en el que este handbook se mantiene a lo largo.

El modelo de componentes de React no está atado específicamente al DOM, sin embargo. Otros renderers enchufan el mismo modelo en diferentes objetivos. El ejemplo más conocido es React Native, que usa los componentes de React y el modelo de estado para manejar interfaces móviles nativas en lugar de una página web. Se menciona aquí para que el nombre no sea una sorpresa después. Enseñarlo está fuera del alcance de este handbook.

¿Librería o framework?

React renderiza UI. No incluye enrutamiento, no decide cómo cargas datos, y no maneja server rendering. Esas son elecciones que haces tú mismo, frecuentemente alcanzando otra herramienta junto con él. Esa es la razón práctica por la que React cuenta como una librería en lugar de un framework completo: hace un trabajo bien y deja el resto a ti, en lugar de poseer toda la app como lo hace un framework.

Los tipos de frameworks cubre esta distinción completa, incluyendo dónde se sienta React junto a algo como Next.js, que sí añade las piezas faltantes.

JunoUI como una función del estado Todo React se reduce a un hábito: describe cómo debe verse la pantalla para los datos que tienes, y deja que React se encargue de cambiarlo. No metes la mano en la página y la editas manualmente, dices qué debe mostrar, y React se pone al día.

Dónde se ejecuta, en el navegador o en algo como React Native, es un detalle para después. El hábito es lo que importa ahora.

JunoUI como una función del estado Construye el hábito de escribir componentes como una función del estado: dados estos datos, renderiza esto. Eso es lo que estás haciendo cada vez, ya sea un conteo de clics en un botón o una página completa.

React maneja las actualizaciones del DOM para que no las escribas a mano, y llamarlo una librería en lugar de un framework es preciso: renderiza UI y deja enrutamiento, carga de datos, y estrategia de rendering a ti.

JunoUI como una función del estado Mantén UI = f(state) como el marco para todo lo que sigue. Los componentes son funciones de datos, el virtual DOM es el propio trabajo administrativo de React para convertir un render en el siguiente conjunto de cambios del DOM, y lo declarativo gana sobre lo imperativo aquí porque dejas de rastrear los pasos de actualización tú mismo.

Por eso cuenta como una librería en lugar de un framework: se detiene en renderizar y deja enrutamiento, obtención de datos, y server rendering a lo que sea que lo acompañe.

Siguiente: Historia y versiones, que cubre cómo React llegó aquí y qué cambió de release en release.