第 1 课：组件与 JSX

• 日期：2026-08-31
• 课程序号：第 1 课
• 知识点：React 函数组件与 JSX

用途

React 用组件拆分界面。每个函数组件接收数据并返回 JSX，适合组合成更大的页面。

核心概念

• 组件名以大写字母开头。
• 函数组件返回 JSX，描述当前应显示的界面。
• JSX 中用 {} 插入 JavaScript 表达式。
• 同级元素需要一个共同父元素或 Fragment。

最小代码示例

function LessonCard() {
  const lesson = 1;

  return (
    <article>
      <h2>React 第 {lesson} 课</h2>
      <p>从组件开始学习。</p>
    </article>
  );
}

export default LessonCard;

3～5 分钟练习

创建 Welcome 组件，在标题中显示变量 name 的值。

参考答案

function Welcome() {
  const name = '小明';
  return <h1>你好，{name}</h1>;
}

与上一课的联系

这是 React 路线的第一课。下一课将用 Props 向组件传入不同数据。