Historia y versiones

React existe desde hace lo suficiente como para haber pasado por varios períodos distintos, y conocer la forma general de esa historia te ayuda a leer el código que encontrarás en la práctica. Un tutorial de 2017 y uno de hoy pueden ser ambos "React" y aún así verse muy diferentes. Este capítulo recorre la línea de tiempo y explica los dos estilos que encontrarás.

Una breve cronología

React nació en Facebook, donde surgió de la necesidad de mantener interfaces grandes y pesadas en datos sincronizadas sin un lío de actualizaciones manuales del DOM. Se lanzó como código abierto en 2013, y la idea en su centro, describe la interfaz para tus datos actuales y deja que React maneje las actualizaciones, se ha mantenido constante desde entonces. Casi todo lo demás sobre cómo escribes React ha evolucionado alrededor de ese núcleo.

Durante sus primeros años, un componente que necesitaba recordar algo se escribía como una clase de JavaScript. Las clases son una característica ordinaria de JavaScript, y React las usaba para darle a un componente un lugar donde guardar datos que cambian con el tiempo, junto con un conjunto de métodos especialmente nombrados que React llamaría en ciertos momentos: cuando el componente aparecía por primera vez en pantalla, cuando se actualizaba y cuando se quitaba. Este estilo fue el predeterminado durante mucho tiempo, y es por eso que una gran cantidad del código React que ya existe se escribe de esa manera.

El gran cambio llegó con hooks, que aparecieron en React 16.8 a principios de 2019. Un hook es una función que React te proporciona y que permite que un componente de función plana haga cosas que antes solo una clase podía hacer, como recordar un valor entre renderizados. Escribir un componente se hizo mucho más corto, y los componentes de función rápidamente se convirtieron en el predeterminado para código nuevo. Hooks los cubre adecuadamente más adelante. Lo único que necesitas llevar adelante por ahora es que los hooks hicieron posible el estilo moderno.

React ha seguido avanzando desde entonces: React 18 llegó en 2022 y React 19 en 2024, cada uno agregando capacidades y suavizando asperezas. Esos lanzamientos importan más una vez que estés construyendo aplicaciones reales, y aparecen más adelante en el manual donde son relevantes.

Ese es el arco en grandes rasgos. No necesitas memorizar fechas. Lo útil es entender que React tiene una larga historia, los fundamentos se han mantenido estables, y el estilo de escritura se ha movido decididamente hacia componentes de función y hooks.

Dos estilos de React en el mundo real

Debido a esa historia, encontrarás React escrito en dos estilos notablemente diferentes.

El estilo más antiguo escribe un componente como una clase. Sus datos cambiantes viven dentro de la clase, y React llama a métodos especialmente nombrados en momentos establecidos en la vida del componente. Una gran cantidad de código en producción todavía funciona de esta manera, y muchos tutoriales antiguos, publicaciones de blog y respuestas de Stack Overflow están escritos en este estilo. Sigue funcionando y sigue siendo compatible. Es simplemente la forma anterior de escribir React.

Cómo se ve el estilo más antiguo

Este manual no enseña este estilo y no necesitas escribirlo. Vale la pena poder reconocerlo, porque te lo encontrarás. Una base de código más antigua tiene componentes que se ven algo como esto:

class Counter extends React.Component {
  state = { count: 0 }

  componentDidMount() {
    // React llama a esto una vez, justo después de que el componente aparece por primera vez en pantalla
  }

  render() {
    return <button>Clicked {this.state.count} times</button>
  }
}

Tres cosas lo distinguen: class y extends React.Component al principio, this.state como el lugar donde viven sus datos cambiantes, y nombres de métodos que comienzan con component que React llama automáticamente en momentos establecidos.

El estilo moderno escribe un componente como una función y usa hooks para darle memoria y ejecutar código cuando las cosas cambian. Esto es en lo que se escribe el código React nuevo, y es lo que la documentación oficial ahora enseña primero.

Este curso enseña React moderno: componentes de función y hooks en toda la extensión. Donde es probable que te encuentres con el equivalente más antiguo basado en clases, ya sea en una base de código en el trabajo o en un tutorial más antiguo, lo señalaremos para que los dos se conecten en tu mente y ninguno te sorprenda.

Dos lanzamientos desde hooks valen la pena conocer por nombre. React 18, en 2022, trajo renderizado concurrente: React ganó la capacidad de preparar actualizaciones en segundo plano e interrumpir el trabajo para mantener la interfaz responsiva. También cambió cómo inicia una aplicación, moviendo el punto de entrada a createRoot, que es lo que permite que una aplicación opte por esas capacidades más nuevas.

React 19, en 2024, continuó en esa dirección. Agregó Actions para manejar envíos de formularios y estados pendientes, un hook use para leer recursos como promesas y contexto durante el renderizado, y permitió pasar ref como una prop ordinaria en lugar de recurrir a forwardRef. Junto con los lanzamientos, el compilador de React automatiza la memoización: el trabajo que los desarrolladores solían hacer manualmente con useMemo y useCallback puede manejarse en tiempo de compilación.

Los hooks desplazaron a las clases en lugar de coexistir con ellas porque el modelo de clase hacía que la lógica con estado fuera difícil de compartir. Reutilizar comportamiento entre componentes significaba envolverlos en componentes de orden superior o pasarlos a través de render props, ambos cosas que anidaban tu árbol y oscurecían dónde vivía realmente la lógica. Los hooks te permiten extraer esa lógica en una función plana, un hook personalizado, y llamarla desde cualquier componente. La historia de reutilización se volvió dramáticamente más simple. Los hooks también evitan this: los componentes de clase te obligan a vincular métodos y razonar sobre lo que this se refiere en tiempo de llamada, una fuente recurrente de bugs que los componentes de función no tienen.

El trabajo concurrente en React 18 es un cambio más profundo de lo que sugiere el cambio de createRoot. Alteró cómo se comporta el renderizado en sí, muy por debajo del nivel de la API que llamas. React ahora puede iniciar el renderizado de una actualización, pausarla y reanudarla o abandonarla, lo que significa que un renderizado ya no está garantizado que se ejecute de principio a fin en una sola pasada. Las características como startTransition y la carga de datos impulsada por Suspense se basan en eso. Es por eso que createRoot importa más allá de ser un nuevo nombre de función: optar por participar es lo que otorga a React permiso para programar e interrumpir el renderizado de esta manera.

A partir de aquí el manual se construye en el estilo moderno, y Components es donde eso comienza en serio: un componente como una función que devuelve una parte de tu interfaz. Antes de que algo se ejecute, sin embargo, necesitas tener React instalado y ejecutándose en tu propia máquina.

JunoDos estilos, un React Si encuentras un tutorial donde los componentes se escriben como class con this.state y componentDidMount, no entres en pánico y no pienses que lo estás haciendo mal. Ese es el estilo más antiguo de React, y aún funciona.

Este curso usa el estilo más nuevo, componentes de función con hooks, y señalaré los equivalentes más antiguos cuando los pasemos para que nada te sorprenda.

JunoDos estilos, un React Mapa rápido para leer código real: las clases con this.state y métodos de ciclo de vida son el estilo anterior a hooks, las funciones con useState y useEffect son React moderno. Verás ambos en el trabajo.

Construimos en el estilo moderno aquí, y señalaré el equivalente basado en clases cuando sea lo que realmente te encontrarás.

JunoDos estilos, un React Los lanzamientos a tener en cuenta: hooks en 16.8 cambió el estilo de autoría predeterminado y arregló la reutilización de lógica sin HOCs o render props; 18 introdujo renderizado concurrente y movió el punto de entrada a createRoot; 19 agregó Actions, el hook use, y ref como una prop.

Los hooks y la concurrencia son los dos cambios que llegan a la semántica del renderizado, y son los que valen la pena entender a nivel de mecanismo.

A continuación: Configurar un proyecto de React, donde ejecutarás React en tu propia máquina.