Introducción a React

React es una biblioteca de JavaScript desarrollada por Facebook (ahora Meta) y de código abierto en 2013, destinada a construir interfaces de usuario, especialmente aplicaciones de una sola página (SPA).

React permite a los desarrolladores construir componentes de UI reutilizables de manera declarativa.

El posicionamiento de React

  • No es un framework, sino una biblioteca:React se centra en la capa de vista (la V en MVC), a diferencia de Angular que ofrece una solución de framework completa.
  • Enfoque de componentes: dividir la interfaz de usuario (UI) en componentes independientes y reutilizables.
  • JavaScript como centro: todo es JavaScript, incluyendo estructura, estilos y lógica.

Las características principales de React

1. Programación declarativa (Declarative)

Programación imperativa tradicional: le dice a la computadora cómo hacerlo.

// 原生 JavaScript（命令式）
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  const counter = document.getElementById('counter');
  const currentValue = parseInt(counter.textContent);
  counter.textContent = currentValue + 1;
});

Programación declarativa de React: le dice a la computadora qué resultado quiere.

// React（声明式）
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Ventajas：

  • El código es más conciso e intuitivo
  • Más fácil de entender y mantener
  • Reduce errores de manipulación manual del DOM
  • El estado y la interfaz de usuario se mantienen sincronizados

2. Basado en componentes (Component-Based)

El núcleo de React es el pensamiento de componentes: divide la UI en componentes independientes, reutilizables y combinables, como si fueran bloques de construcción. Cada componente solo se preocupa por su propio estado (state) y propiedades (props), con una lógica clara y fácil de mantener.

Las aplicaciones de React están formadas por componentes independientes; cada componente:

  • Encapsula su propia estructura, estilos y lógica.
  • Puede recibir entradas (props).
  • Puede mantener un estado interno (state).
  • Puede ser reutilizado y combinado.

Ejemplo

// Un componente simple
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Reutilización y composición de componentes
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

Ventajas del enfoque de componentes：

  • Reutilización: el mismo componente puede usarse en múltiples lugares.
  • Mantenibilidad: modificar un componente no afecta a otras partes.
  • Testabilidad: los componentes independientes son fáciles de probar mediante pruebas unitarias.
  • Colaboración: los miembros del equipo pueden desarrollar diferentes componentes en paralelo.

3. DOM virtual (Virtual DOM)

¿Qué es el Virtual DOM?

El Virtual DOM es una representación en JavaScript del DOM real, una estructura de datos ligera en memoria.

Cómo funciona:

1. 状态改变
   ↓
2. 生成新的虚拟 DOM 树
   ↓
3. 与旧虚拟 DOM 树进行对比（Diffing）
   ↓
4. 计算出最小差异（Reconciliation）
   ↓
5. 只更新真实 DOM 中变化的部分

Ilustración:

  • El Virtual DOM es una representación ligera en JavaScript del DOM del navegador.
  • Cuando el estado cambia, el framework (como React) primero realiza cálculos y comparaciones en el Virtual DOM (algoritmo diff).
  • Luego, mediante el proceso de parcheo (patch), solo se aplican las actualizaciones mínimas necesarias al DOM real (Real DOM).

¿Por qué se necesita el Virtual DOM?

Problemas con la manipulación del DOM real:

  • La manipulación del DOM es muy lenta (comparada con las operaciones de JavaScript).
  • La manipulación frecuente del DOM provoca reordenamiento (reflow) y repintado (repaint) de la página.
  • Manipular el DOM directamente es propenso a errores.

Ventajas del Virtual DOM:

  • Optimización del rendimiento: actualizaciones por lotes, reducen el número de manipulaciones del DOM real.
  • Multiplataforma: el Virtual DOM puede renderizarse en diferentes plataformas (web, móvil, escritorio).
  • Declarativo: el desarrollador solo necesita preocuparse por el estado, sin manipular el DOM manualmente.

Comparación de ejemplos:

// 假设要更新 1000 个列表项
const items = Array(1000).fill(0).map((_, i) => i);

// 传统方式：每次都操作真实 DOM（慢）
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li); // 1000 次 DOM 操作
});

// React 方式：通过虚拟 DOM 批量更新
function ItemList() {
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}
// React 会智能地批量更新 DOM

4. Flujo de datos unidireccional (Unidirectional Data Flow)

Los datos en React fluyen en una sola dirección hacia abajo, de Parent (padre) → Child (hijo); Child no puede transmitir de vuelta a Parent:

React utiliza un flujo de datos de arriba hacia abajo:

父组件
  ↓ (props)
子组件
  ↓ (props)
孙组件

Características：

  • Los datos fluyen del componente padre al componente hijo.
  • Los componentes hijos se comunican con el componente padre mediante funciones de callback.
  • El flujo de datos es claro, lo que facilita el seguimiento y la depuración.

Ejemplo

function Parent() {
  const [message, setMessage] = useState('Hello');
 
  return (
    <Child
      message={message}  // Los datos fluyen hacia abajo
      onUpdate={setMessage}  // Comunicación hacia arriba mediante callbacks
    />
  );
}

function Child({ message, onUpdate }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => onUpdate('Updated!')}>
        Update
      </button>
    </div>
  );
}

Las principales ventajas de React

1. La curva de aprendizaje es relativamente suave

  • Pocas API centrales
  • Principalmente requiere conocimientos de JavaScript
  • Conceptos claros y documentación completa.

2. Ecosistema potente

  • Enrutado：React Router
  • Gestión del estado：Redux, Zustand, Jotai
  • Librerías de UI：Material-UI, Ant Design, Chakra UI
  • Cadena de herramientas：Create React App, Vite, Next.js

3. Amplio soporte de la comunidad

  • Una de las bibliotecas de front-end más populares en GitHub.
  • Gran cantidad de componentes y herramientas de terceros.
  • Comunidad activa y abundantes recursos de aprendizaje.

4. Rendimiento excelente

  • Optimización del Virtual DOM
  • Renderizado bajo demanda
  • Soporte para división de código y carga diferida (lazy loading).

5. Capacidad multiplataforma

  • React Native: desarrollo de aplicaciones móviles.
  • React Native for Windows: aplicaciones de escritorio.
  • React 360: aplicaciones de realidad virtual (VR).

6. Soporte para aplicaciones empresariales

Utilizado por numerosas empresas reconocidas:

  • Facebook/Meta
  • Instagram
  • Netflix
  • Airbnb
  • Uber
  • Tencent, Alibaba, etc.

Casos de uso de React

Escenarios adecuados para usar React:

  • Aplicaciones de una sola página (SPA)
  • Interfaces dinámicas que requieren actualizaciones frecuentes
  • Interfaces de usuario interactivas complejas
  • Proyectos grandes que requieren reutilización de componentes
  • Aplicaciones que requieren desarrollo multiplataforma

Escenarios menos adecuados:

  • Sitios web estáticos simples (puede ser sobreingeniería)
  • Sitios web con requisitos muy altos de SEO (requieren soluciones SSR como Next.js)
  • Equipos que no están familiarizados con JavaScript

Comparación de React con otros frameworks

Característica React Vue Angular
Tipo Biblioteca Framework progresivo Framework completo
Curva de aprendizaje Media Relativamente suave Relativamente pronunciada
Flexibilidad Alto Medio Baja (muchas convenciones)
Ecosistema Muy rico Rico Integración completa
Soporte empresarial Meta Independiente Google
TypeScript Buen soporte Buen soporte Soporte nativo

Historia de React

  • 2013: React se vuelve de código abierto
  • 2015: Lanzamiento de React Native
  • 2016: React 16 (arquitectura Fiber)
  • 2019: Lanzamiento oficial de React Hooks
  • 2020: Versión experimental del modo concurrente
  • 2022: React 18 (renderizado concurrente)
  • 2024-2025: Nuevas características como React Compiler y Server Components
Otras extensiones