¿Qué es React?

Hasta ahora hemos trabajado con HTML, CSS y JavaScript puro (también conocido como “Vanilla JavaScript”) para construir nuestra aplicación DevJobs. Esto está genial para proyectos pequeños, pero cuando las aplicaciones crecen, manipular el DOM manualmente se vuelve complejo y difícil de mantener.

React es una biblioteca de JavaScript creada por Facebook (Meta) en 2013 que nos ayuda a construir interfaces de usuario de forma más sencilla, organizada y eficiente.

Analogía: React como un constructor de LEGO

Imagina que estás construyendo una ciudad con piezas de LEGO:

Sin React (JavaScript puro): Cada vez que quieres una casa, tienes que colocar ladrillo por ladrillo, ventana por ventana, puerta por puerta.
Con React: Creas un “molde” de casa una vez. Luego solo dices “quiero 10 casas aquí” y React las construye automáticamente.

Eso es exactamente lo que React hace con tu UI: te permite crear componentes reutilizables (moldes) que puedes usar una y otra vez.

¿Por qué migrar DevJobs a React?

Miremos nuestro código actual de DevJobs. Tenemos:

✅ Listado de empleos cargados desde JSON
✅ Filtros por ubicación
✅ Botones “Aplicar” con estado
✅ Renderizado dinámico con fetch

Pero conforme crece, nos encontraremos con problemas:

1. Código repetitivo y difícil de mantener

// fetch-data.js - Creamos elementos manualmente
jobs.forEach((job) => {
  const article = document.createElement('article')
  article.className = 'job-listing-card'
  article.innerHTML = `<div>
      <h3>${job.titulo}</h3>
      <small>${job.empresa} | ${job.ubicacion}</small>
      <p>${job.descripcion}</p>
    </div>
    <button class="button-apply-job">Aplicar</button>`
  container.appendChild(article)
})

Cada vez que queremos mostrar un empleo, tenemos que crear manualmente el elemento, asignar clases, construir el HTML y añadirlo al DOM. Si queremos cambiar algo, tenemos que buscarlo en todo el código.

2. Gestión manual del estado

// apply-button.js - Actualizamos el DOM manualmente
element.textContent = '¡Aplicado!'
element.classList.add('is-applied')
element.disabled = true

Tenemos que buscar el elemento en el DOM, cambiar su texto, añadir clases y modificar propiedades. Si el estado cambia en varios lugares, se vuelve un caos mantener todo sincronizado.

3. Sincronización compleja

// filters.js - Tenemos que buscar y actualizar elementos manualmente
jobs.forEach((job) => {
  const modalidad = job.getAttribute('data-modalidad')
  const isShown = selectedValue === '' || selectedValue === modalidad
  job.classList.toggle('is-hidden', isShown === false)
})

Cuando filtramos, tenemos que iterar sobre todos los elementos del DOM, leer atributos y actualizar clases. Es propenso a errores y lento.

Con React, todo esto se simplifica

Ventajas de React:

✅ Declarativo: Describes QUÉ quieres mostrar, no CÓMO hacerlo
✅ Componentes reutilizables: Escribe una vez, usa en cualquier lugar
✅ Virtual DOM: React actualiza solo lo que cambia (súper rápido)
✅ Estado reactivo: Los datos y la UI se mantienen sincronizados automáticamente
✅ Ecosistema enorme: Miles de librerías y herramientas disponibles
✅ Comunidad gigante: Usado por Facebook, Instagram, Netflix, Airbnb, etc.

Comparación práctica

JavaScript puro:

// Manipulamos el DOM manualmente
const button = document.querySelector('.button-apply-job')
button.addEventListener('click', () => {
  button.textContent = '¡Aplicado!'
  button.classList.add('is-applied')
  button.disabled = true
})

React:

// Declaramos lo que queremos mostrar
function ApplyButton() {
  const [applied, setApplied] = useState(false)

  return (
    <button
      onClick={() => setApplied(true)}
      disabled={applied}
      className={applied ? 'is-applied' : ''}
    >
      {applied ? '¡Aplicado!' : 'Aplicar'}
    </button>
  )
}

¿Ves la diferencia?

❌ JavaScript puro: Manipulas el DOM manualmente (createElement, innerHTML, appendChild, querySelector)
✅ React: Declaras lo que quieres mostrar según el estado, React se encarga del resto

¿Qué aprenderemos en este módulo?

En las próximas clases, vamos a:

Configurar un proyecto React desde cero
Crear componentes para cada parte de nuestra aplicación
Migrar DevJobs de JavaScript vanilla a React
Gestionar el estado de forma reactiva
Trabajar con props para comunicar componentes
Manejar eventos de forma declarativa

Al final de este módulo, tendrás DevJobs completamente funcional en React, con un código más limpio, mantenible y escalable.

React no es un framework, es una biblioteca

Es importante aclarar que React se define como una biblioteca (library), no como un framework:

Biblioteca: Te da herramientas específicas para resolver problemas concretos (en este caso, construir interfaces)
Framework: Te da una estructura completa con reglas estrictas sobre cómo organizar todo tu código

React solo se enfoca en la capa de vista (la UI). Para otras cosas como:

Enrutamiento (navegación entre páginas)
Gestión de estado global
Peticiones HTTP
Animaciones

…necesitarás otras bibliotecas que puedes elegir según tus necesidades. Esto te da flexibilidad, aunque también requiere tomar decisiones.

¿Por qué React es tan popular?

React es la biblioteca más usada para crear interfaces web. Algunas razones:

🚀 Curva de aprendizaje suave - Si sabes JavaScript, aprender React es natural
🔄 Reutilización de código - Los componentes se pueden usar en múltiples proyectos
⚡ Rendimiento excelente - El Virtual DOM hace actualizaciones súper eficientes
📱 React Native - Puedes crear apps móviles nativas con el mismo código
💼 Oportunidades laborales - La mayoría de empresas buscan desarrolladores React
📚 Documentación excelente - Bien documentado y fácil de aprender
🛠️ Herramientas increíbles - DevTools, Create React App, Next.js, etc.

React no es la única opción

Aunque React es el más popular, no es la única opción disponible. Existen otras alternativas igual de interesantes como:

Vue.js - Framework progresivo muy fácil de aprender, popular en Europa
Angular - Framework completo de Google, usado en grandes empresas
preact - Biblioteca reactiva ultra ligera con sintaxis similar a React
Svelte - Compilador moderno que genera código muy optimizado
Solid.js - Biblioteca reactiva ultra rápida con sintaxis similar a React

Todas son excelentes opciones. En este curso usaremos React porque tiene mucha demanda laboral, una comunidad muy grande y un ecosistema muy maduro, lo que facilita el aprendizaje y la resolución de problemas.

💡 Una vez domines React, aprender Vue, Svelte u otros frameworks será mucho más fácil porque todos comparten conceptos fundamentales: componentes, estado, props, reactividad, etc.

Empecemos con React

En esta clase vamos a migrar DevJobs paso a paso de JavaScript vanilla a React. Verás cómo cada problema que teníamos se resuelve de forma más elegante y simple.

¡Prepárate para ver el poder de React en acción!