Component / JSX：把 UI 當成資料的投影

Why now：為什麼先學 DOM，現在才學 React？

因為你已經知道原生 Browser 模型：

React 只是把「state → UI」這件事系統化。若不知道 DOM / event / state，本來很容易把 React API 當成魔法。

Learning outcomes

• 能說明 JSX 在 build 前後的角色。
• 能把 component 視為輸入 props → UI description 的 function。
• 能區分 React component 與 DOM element。
• 能用 composition 拆 UI，而不是只靠巨大單一 component。

1. JSX 不是 Browser 原生語法

function Greeting() {
  return <h1>Hello</h1>;
}

JSX 需要 build tooling 轉成一般 JavaScript。Browser 真正執行的是 build 後的 JavaScript bundle。

2. Component 是 function，不是 HTML template 檔案

function CourseCard({
  title,
  score
}) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{score}</p>
    </article>
  );
}

這裡的 title / score 是 JavaScript values；JSX 只是描述它們要如何映射成 UI。

3. Capitalized component vs lowercase element

<CourseCard />
<button>Save</button>

4. Composition：大畫面拆成責任清楚的小 component

function App() {
  return (
    <main>
      <Header />
      <CourseSummary />
      <CourseList />
    </main>
  );
}

不要因為能拆就無限拆。Component boundary 應該對應可理解的 UI responsibility / reuse / state boundary。

5. Render phase 應盡量是 pure calculation

function Summary({
  courses
}) {
  const passed =
    courses.filter(
      c => c.score >= 60
    ).length;

  return (
    <p>
      Passed: {passed}
    </p>
  );
}

render 過程應主要計算 UI，而不是偷偷送 request、改 global variable、寫 localStorage。Side effects 後面才集中處理。

Project checkpoint：Course Dashboard v1

const courses = [
  {
    id: 1,
    title: "JavaScript",
    score: 92
  },
  {
    id: 2,
    title: "C++",
    score: 78
  }
];

function CourseCard({
  course
}) {
  return (
    <article>
      <h2>{course.title}</h2>
      <p>Score: {course.score}</p>
    </article>
  );
}

function App() {
  return (
    <main>
      <h1>Course Dashboard</h1>

      {courses.map(course => (
        <CourseCard
          key={course.id}
          course={course}
        />
      ))}
    </main>
  );
}

現在資料還是 module 常數；下一課才加真正 state。

Debug evidence：畫面沒出來先分 build 還是 runtime

• JSX syntax / import 錯誤：可能 build 直接失敗。
• component runtime TypeError：Browser console stack trace。
• 資料是空 array：可能正常 render 但沒有 cards。
• CSS 隱藏：React 可能其實已 render DOM。