React

¿Qué es React?

Imagina que construyes con bloques de LEGO inteligentes - cada pieza tiene su función específica y puedes combinarlas para crear estructuras complejas.

React es una biblioteca de JavaScript desarrollada por Meta (Facebook) que te permite construir interfaces de usuario dividiendo todo en "componentes" reutilizables. En lugar de escribir código para toda una página, creas piezas pequeñas e independientes que puedes combinar.

React te permite:

• Dividir interfaces complejas en componentes pequeños y manejables
• Reutilizar código - escribes un botón una vez, lo usas en toda la aplicación
• Manejar cambios eficientemente - React actualiza solo lo que necesita cambiar
• Pensar de forma declarativa - describes cómo quieres que se vea, no cómo lograrlo
• Crear aplicaciones interactivas - desde simples formularios hasta dashboards complejos

React se volvió popular porque resuelve problemas reales: hace que el código sea más organizado, más fácil de mantener y permite que equipos grandes trabajen en la misma aplicación sin pisarse los pies.

¿Para qué sirve?

• Componentes reutilizables: Divide tu UI en piezas independientes
• Virtual DOM: Actualizaciones eficientes del DOM real
• Estado declarativo: Describes cómo se ve tu UI en cada estado
• Ecosistema rico: Miles de librerías y herramientas compatibles
• Unidirectional data flow: Flujo de datos predecible

¿Cuándo usarlo?

✅ Perfecto para:

• Single Page Applications (SPAs)
• Dashboards complejos con mucha interactividad
• Aplicaciones que manejan mucho estado
• Equipos que necesitan componentes reutilizables
• Proyectos que crecerán en complejidad

❌ Considera alternativas si:

• Sitio web simple con poco JavaScript
• Equipo sin experiencia en JavaScript moderno
• SEO es crítico (sin SSR)
• Necesitas arrancar muy rápido

Ejemplos prácticos

Empresas que usan React:

• Facebook: Toda la plataforma web
• Instagram: Interfaz web
• WhatsApp Web: Aplicación de mensajería
• Airbnb: Plataforma de reservas
• Uber: Dashboard de conductores

Componente simple:

function WelcomeCard({ nombre, rol }) {
  return (
    <div className="card">
      <h2>¡Hola {nombre}!</h2>
      <p>Rol: {rol}</p>
      <button onClick={() => alert('¡Bienvenido!')}>
        Saludar
      </button>
    </div>
  )
}

// Uso
<WelcomeCard nombre="Ana" rol="Desarrolladora" />

Conceptos clave

• JSX: Sintaxis que mezcla JavaScript y HTML
• Props: Datos que pasas entre componentes
• State: Datos que cambian en tu componente
• Hooks: Funciones que agregan funcionalidad (useState, useEffect)

Conceptos relacionados

• Next.js - Framework basado en React
• JavaScript - Lenguaje base
• JSX - Sintaxis de React