项目指南阶段 03 · 前端时长 · 3–4 周

构建经过打磨、超越首屏体验的界面。

前端阶段使用 React 构建现代界面，并探索 Gatsby、Next.js、渲染方式及网站部署。

把界面构建成一个系统

React 鼓励你用职责清晰的组件组合页面，而不是把页面当成一个庞大的模板。你将学习组件边界、属性和状态，让重复的界面模式保持一致，也让修改更容易理解。

选择页面如何呈现在浏览器中

Gatsby 和 Next.js 提供了构建与渲染现代网页体验的方式。服务器端渲染与静态生成描述了准备页面输出的不同时间点。理解这些选择，有助于根据页面需求决定方案，而不是习惯性地使用某项功能。

连接界面并发布

当界面连接真实服务并处理服务带来的状态时，前端才成为应用。本阶段还将介绍通过 Cloudflare 或 Vercel 发布，让项目从本地开发环境走向可访问的网址。

从概念到可运行的代码

这些代码片段展示了各阶段知识在真实项目中的应用。请将它们作为阅读、分析、修改和测试的起点，而不是不理解就复制的代码。

组合可复用的界面组件

ProgramCard 负责单个项目的标记，ProgramList 负责列表与标题。通过 props 避免重复标记，并为每个列表项提供稳定的 key。

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>
  );
}

在页面渲染时获取数据

这个 App Router 页面在异步 Server Component 中获取数据。五分钟重新验证适合偶尔更新的内容；显式检查响应可避免将失败结果当作有效数据展示。

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>
  );
}

阅读后动手修改
改变一项要求，先预测结果，再运行代码验证。在评审时，说明你的取舍以及下一步会做的一项改进。