GUÍA DEL PROGRAMAETAPA 03 · FrontendDURACIÓN · 3–4 semanas

Crea interfaces cuidadas que funcionan más allá de la primera pantalla.

La etapa Frontend desarrolla interfaces modernas con React y explora Gatsby, Next.js, las opciones de renderizado y el despliegue web.

Convertir la interfaz en un sistema

React propone componer una página con componentes enfocados en lugar de tratarla como una sola plantilla extensa. Trabajarás los límites, las propiedades y el estado de los componentes para mantener patrones coherentes y facilitar la comprensión de los cambios.

Elegir cómo llega la página al navegador

Gatsby y Next.js ofrecen formas de crear y renderizar experiencias web modernas. El renderizado del lado del servidor y la generación estática describen distintos momentos en que se prepara la salida de una página. Comprenderlos ayuda a elegir el enfoque según la necesidad, no por costumbre.

Conectar la vista y publicarla

Un frontend se convierte en aplicación cuando su interfaz se conecta a servicios reales y gestiona los estados que estos producen. Después, la etapa introduce la publicación mediante Cloudflare o Vercel, para llevar el trabajo del entorno local a una dirección web disponible.

Del concepto al código funcional

Estos fragmentos muestran cómo aparecen en proyectos reales los conceptos de cada nivel. Son puntos de partida para leer, cuestionar, adaptar y probar; no código para copiar sin entenderlo.

Componer piezas reutilizables

ProgramCard contiene el marcado de un programa y ProgramList organiza la colección y su título. Las props evitan repetir el mismo marcado y cada elemento tiene una clave estable.

function ProgramCard({ title, duration, href }) {
  return (
    <article className="program-card">
      <p className="program-card__duration">{duration}</p>
      <h2>{title}</h2>
      <a href={href} aria-label={`Explore the ${title} program`}>
        View program <span aria-hidden="true">→</span>
      </a>
    </article>
  );
}

export function ProgramList({ programs }) {
  return (
    <section aria-labelledby="programs-title">
      <h1 id="programs-title">Choose a learning path</h1>
      <div className="program-grid">
        {programs.map((program) => (
          <ProgramCard key={program.id} {...program} />
        ))}
      </div>
    </section>
  );
}

Cargar datos al renderizar la página

Esta página App Router obtiene los datos en un Server Component asíncrono. Revalidar cada cinco minutos sirve para contenido que cambia ocasionalmente; comprobar la respuesta evita tratar un fallo como datos válidos.

async function getPrograms() {
  const response = await fetch("https://api.example.com/programs", {
    next: { revalidate: 300 },
  });

  if (!response.ok) throw new Error("Programs could not be loaded");
  return response.json();
}

export default async function ProgramsPage() {
  const programs = await getPrograms();

  return (
    <main>
      <h1>Programs</h1>
      <ProgramList programs={programs} />
    </main>
  );
}

Léelo y después adáptalo
Cambia un requisito, predice el resultado y ejecuta el código para comprobarlo. En la revisión, explica la decisión tomada y una mejora que harías después.