¿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, agregas un listener de clic y actualizas el número manualmente cada vez que alguien hace clic. Agrega un filtro de búsqueda, un total de carrito de compras y un modal que se abre y cierra, y de repente tienes un conjunto entero de actualizaciones manuales dispersas por el código, cada una un lugar donde un bug puede colarse cuando los datos cambian en otra parte de la página.

React es una biblioteca de JavaScript para construir interfaces de usuario a partir de componentes, y te quita ese trabajo manual de encima. Este capítulo ve qué significa eso en la práctica: la idea central detrás de React, dónde se ejecuta y cómo encaja en la pregunta de biblioteca versus framework que surge temprano para la mayoría de las personas que lo aprenden.

Componentes y la idea central

Aquí 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 algunos conceptos que aún no conoces: el marcado dentro de return es JSX, useState es un hook, y onClick es un manejador de eventos. Los capítulos Components y JSX cubren ese marcado, State cubre useState en detalle, y Events cubre onClick, así que toma la sintaxis como dada por ahora y sigue la estructura de la idea en su lugar.

count es el estado. El JSX devuelto por Counter describe qué debería 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 directamente el texto del botón. Lo describes de nuevo para el nuevo valor, y React se encarga de calcular qué cambió en la página.

Esa es la idea central que está debajo de cada componente de React: describes la UI como una función de tus datos, generalmente llamado estado, y React se encarga de actualizar el DOM para que coincida. Un componente es una función que devuelve un pedazo de UI, y una app es un árbol de componentes combinados juntos, todos funcionando de la misma manera que el contador anterior.

La diferencia que vale la pena nombrar con precisión es declarativo versus imperativo. El código imperativo, la manipulación pura del DOM, detalla los pasos: encuentra este elemento, cambia su texto, agrega esta clase. El código declarativo, lo que devuelve un componente, detalla el estado final: dados estos datos, así es como debería verse el botón. React lleva a cabo los pasos intermedios.

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 devuelven, compara contra la versión anterior, y usa para determinar el conjunto más pequeño de cambios reales del DOM necesarios. Existe, y está bien dejarlo de lado por ahora. No lo creas, leas, o manejes directamente; es el mecanismo interno de React para la mitad "hacer coincidir el DOM" 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 effects están todos construidos sobre esa única idea. La mayoría de lo que parece un concepto separado de React más adelante es realmente una consecuencia de este uno.

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á amarrado específicamente al DOM, sin embargo. Otros renderers conectan el mismo modelo a objetivos diferentes. El ejemplo más conocido es React Native, que usa los componentes y el modelo de estado de React para impulsar 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.

¿Biblioteca o framework?

React renderiza UI. No incluye enrutamiento, no decide cómo cargas datos, y no maneja renderizado en el servidor. Esas son decisiones que tomas tú mismo, a menudo recurriendo a otra herramienta junto a él. Esa es la razón práctica por la que React se considera una biblioteca en lugar de un framework completo: hace un trabajo bien y deja el resto a ti, en lugar de ser dueño de toda la app de la manera en que lo hace un framework.

The kinds of frameworks cubre esta distinción en detalle, incluyendo dónde se sitúa React al lado de algo como Next.js, que sí agrega las piezas faltantes.

JunoUI as a function of state Todo lo de React se reduce a un hábito: describe cómo debería verse la pantalla para los datos que tienes, y deja que React se encargue de cambiarla. No entras a la página y la editas a mano, dices qué debería 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 as a function of state Cultiva 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 se encarga de las actualizaciones del DOM para que no las escribas a mano, y llamarlo una biblioteca en lugar de un framework es preciso: renderiza UI y deja el enrutamiento, la carga de datos y la estrategia de renderizado a ti.

JunoUI as a function of state 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 sistema de contabilidad de React para convertir un renderizado en el siguiente conjunto de cambios del DOM, y lo declarativo vence a lo imperativo aquí porque dejas de rastrear los pasos de actualización tú mismo. Por eso se considera una biblioteca en lugar de un framework: se detiene en el renderizado y deja el enrutamiento, la obtención de datos y el renderizado en el servidor a lo que sea que aparees con él.

Lo siguiente: History and versions, que cubre cómo llegó React aquí y qué cambió de versión en versión.