React

¿Qué es React?

React es una biblioteca JavaScript de código abierto para construir interfaces de usuario basadas en componentes reutilizables. Creada por Jordan Walke, ingeniero de Facebook (ahora Meta), React se utilizó internamente en el newsfeed de Facebook en 2011 y se liberó como open source en mayo de 2013. Con más de 230.000 stars en GitHub y 20+ millones de descargas semanales en npm, React es la librería frontend más utilizada del mundo. Meta mantiene el desarrollo activo con un equipo dedicado, y React 19 (lanzado en 2024) introdujo Server Components, Actions y un compilador optimizador. El ecosistema incluye React Native (apps móviles), Next.js (framework full-stack de Vercel), Remix, Gatsby y una comunidad de millones de desarrolladores.

Origen y evolución

Walke creó FaxJS, el prototipo de React, para resolver la complejidad del UI de Facebook Ads. La innovación clave fue el Virtual DOM: en lugar de manipular el DOM real directamente (costoso en rendimiento), React crea una representación virtual y solo actualiza las diferencias. En 2015, React Native extendió el modelo de componentes a iOS y Android. Los Hooks, introducidos en React 16.8 (2019), revolucionaron la gestión de estado eliminando la necesidad de clases, con useState, useEffect y useContext como primitivas. React 18 (2022) añadió Concurrent Rendering para priorizar actualizaciones de UI. React 19 (2024) consolidó Server Components y un compilador que optimiza automáticamente re-renders innecesarios, eliminando la necesidad de memo, useMemo y useCallback manuales en la mayoría de casos.

Modelo de componentes

React estructura las interfaces como árboles de componentes que reciben props y gestionan estado interno. JSX combina JavaScript con markup HTML-like, compilando a llamadas de createElement. Los componentes funcionales con Hooks son el patrón estándar: useState para estado local, useEffect para efectos secundarios, useContext para estado compartido, useReducer para lógica compleja y useRef para referencias al DOM. El flujo de datos unidireccional (top-down) simplifica el debugging: los datos fluyen de padre a hijo via props, y los eventos burbujean hacia arriba. Los Custom Hooks permiten extraer y reutilizar lógica stateful entre componentes sin duplicar código. El sistema de tipos se refuerza con TypeScript, que es la combinación estándar en producción.

Ecosistema y herramientas

Next.js (Vercel) es el framework React más popular con SSR, SSG, ISR, App Router y Server Components nativos. Remix (Shopify) se centra en web standards y carga de datos progresiva. Gatsby optimiza sitios estáticos con GraphQL. Para gestión de estado global, las opciones incluyen Redux Toolkit, Zustand, Jotai, Recoil y TanStack Query (ex-React Query) para estado de servidor. El testing utiliza React Testing Library como estándar con Jest o Vitest. Storybook documenta y testea componentes aislados. Vite ha reemplazado a Create React App como bundler preferido por su velocidad. Las librerías de UI incluyen shadcn/ui, Radix, Chakra UI, Material UI y Ant Design. React Developer Tools (extensión Chrome/Firefox) permite inspeccionar el árbol de componentes y profiling.

React en ecommerce

React es la base tecnológica de las principales plataformas ecommerce modernas. Shopify Hydrogen utiliza React con Server Components para storefronts headless. Next.js Commerce proporciona templates ecommerce con Shopify, BigCommerce y Saleor. Vercel Commerce y Medusa.js construyen experiencias de compra headless sobre React. Las tiendas ecommerce se benefician del rendering condicional para variantes de producto, lazy loading de componentes pesados, y optimistic updates para carritos de compra. La arquitectura de Server Components reduce el JavaScript enviado al cliente, mejorando Core Web Vitals. Las integraciones con APIs de pago (Stripe Elements, PayPal SDK) y CMSs headless (Contentful, Sanity, Strapi) convierten a React en la opción dominante para frontends ecommerce custom.

Modelo de precios

React es completamente gratuito y open source bajo licencia MIT. No hay costes de licencia, suscripción ni restricciones de uso comercial. El desarrollo está financiado por Meta, que emplea al equipo core de React. Los costes asociados son de desarrollo (salario de desarrolladores React: 80.000-180.000 USD/año según mercado y seniority) y hosting. Los frameworks React tienen sus propios modelos: Next.js es open source pero Vercel ofrece hosting desde 20 USD/mes; Gatsby Cloud fue adquirido por Netlify. Las librerías del ecosistema son mayoritariamente open source y gratuitas. La formación y certificación se obtiene a través de la documentación oficial (react.dev), cursos de plataformas como Udemy, Frontend Masters y egghead.io, y la comunidad en Discord, Reddit y Stack Overflow.

Características Principales

• Componentes funcionales con Hooks: useState, useEffect, useContext, useReducer y Custom Hooks para lógica reutilizable sin clases
• Virtual DOM con reconciliación eficiente: solo actualiza las diferencias con el DOM real, optimizando rendimiento de interfaces complejas
• Server Components (React 19): renderizado en servidor que reduce JavaScript al cliente con compilador que elimina re-renders innecesarios
• JSX: sintaxis declarativa que combina JavaScript con markup HTML-like; compilado con Babel o SWC para máximo rendimiento
• Concurrent Rendering (React 18): priorización de actualizaciones de UI para interfaces responsivas bajo carga de datos pesada
• React Developer Tools: inspección del árbol de componentes, profiling de rendimiento y debugging de estado en Chrome y Firefox

Se integra con 14 herramientas