agentmentoragentmentor

第 02 节:JSX 和组件:先写能看见的东西

本节 objectives:

  • 能解释组件为什么常写成函数。
  • 能写出合法 JSX,并知道 className、闭合标签、大括号表达式的基本规则。
  • 能把一个页面拆成两个小组件。

先修:已经能运行项目并修改 app/page.tsx ｜ 上一节 << 01 ｜ 下一节 03 >>

看起来像 HTML,但不是复制 HTML

你在 return (...) 里看到的东西很像 HTML,但 React 把它叫 JSX。JSX 是 JavaScript 里的标记语法,最后会变成 React 能理解的描述对象1。这就是为什么你会同时看到 <h1> 和 {name}。

新手容易误会:「我还不会 JavaScript,是不是不能写 React?」可以写,但要先学一小块最常用的 JavaScript:函数、变量、大括号表达式。React 官方把组件描述为返回标记的 JavaScript 函数2。所以你不需要一口气学完整门 JS,先会读组件就够开局。

讲解

组件是返回界面的函数。
一个最小组件长这样:

tsx
function Welcome() {  return <h1>欢迎来到 Next.js</h1>;}

函数名用大写开头,React 才会把 <Welcome /> 当作组件,不是普通 HTML 标签2。

JSX 里只能返回一个外层。
如果要返回多个元素,外面包一个 <main>、<section> 或空标签 <>...</>。标签也要闭合,比如 <img />、<br />。这些规则来自 JSX 比 HTML 更接近 JavaScript 表达式1。

大括号让 JavaScript 进入 JSX。
普通文字直接写;变量、计算结果、函数调用放进 {}。例如:

tsx
const name = "小林";return <p>{name} 正在学习 Next.js。</p>;

HTML 的 class 在 JSX 里写作 className。
这是因为 class 在 JavaScript 里本来就是关键字。React 的 JSX 文档会把这类 HTML 属性差异单独提醒出来1。

跟我做一遍(worked example)

目标:把首页拆成一个页面组件和一个课程卡片组件。

在 app/page.tsx 写:

tsx
function LessonCard() {  return (    <article>      <h2>第 1 步:先跑起来</h2>      <p>我已经能启动项目,并找到首页文件。</p>    </article>  );}
export default function Home() {  return (    <main>      <h1>Next.js 学习记录</h1>      <LessonCard />    </main>  );}

为什么这样写:

  • LessonCard 是一个组件,负责一块可复用界面。
  • Home 是 Next.js 要导出的页面组件。
  • <LessonCard /> 像标签,但它引用的是上面的函数。
  • 先把小块拆出来,后面加列表、样式、交互都更清楚。

换你补全(faded example)

下面的组件少了组件名、标题文本和一次组件调用。补全后,页面上应该出现两块学习记录。

tsx
function ______() {  return (    <article>      <h2>______</h2>      <p>今天只补一个最小概念。</p>    </article>  );}
export default function Home() {  return (    <main>      <h1>学习记录</h1>      <LessonCard />      <______ />    </main>  );}

参考答案:

tsx
function NoteCard() {  return (    <article>      <h2>第 2 步:认识 JSX</h2>      <p>今天只补一个最小概念。</p>    </article>  );}
export default function Home() {  return (    <main>      <h1>学习记录</h1>      <LessonCard />      <NoteCard />    </main>  );}

补空的关键判断点是:组件名要大写开头,调用时要写成自闭合标签。

小结 + 通向下一节

你已经能把页面看成「组件返回 JSX」。下一节把视角从一个页面扩到多个页面:Next.js 怎么用文件夹表达路由,又怎么让多个页面共享同一个布局。

Footnotes

  1. React: Writing Markup with JSX — https://react.dev/learn/writing-markup-with-jsx ↩ ↩2 ↩3

  2. React: Your First Component — https://react.dev/learn/your-first-component ↩ ↩2

练习

Level 1:找出 JSX 和 JavaScript。
做法:把你自己的 app/page.tsx 复制到笔记里,用两种颜色标出 JSX 标签和 JavaScript 变量/函数。

提示 1

看到尖括号,先按 JSX 看。

提示 2

看到 function、const、return,先按 JavaScript 看。 Level 2:做一个 GoalCard。
做法:新增一个组件,显示「目标」「本周动作」「完成标准」三行。把它放进首页。

看参考答案
tsx
function GoalCard() {  return (    <article>      <h2>目标:做出一个小站</h2>      <p>本周动作:每天改一个页面。</p>      <p>完成标准:能解释每个文件为什么存在。</p>    </article>  );}

常见错误剖析:把组件写成 function goalCard() 再用 <goalCard />,React 会把小写开头当成普通 HTML 标签。组件函数要大写开头。

自评