为什么用 React、你的第一个组件与 JSX

了解 React 是什么，编写你的第一个组件，并学习 JSX 的基本规则。

8 分钟 · 3 题

React 是一个 JavaScript 库，换句话说，它是一个现成代码的工具箱，专门用来创建用户界面：也就是你在屏幕上看到并与之交互的一切（按钮、菜单、表单……）。学习本模块的唯一前提是掌握 JavaScript 基础（变量、函数、数组）。为了理解 React 为什么重要，我们先来看看在没有 React 的情况下如何修改一个页面。

const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";

这种做法可行，但一旦页面变大，你就得逐一找到每个元素，在恰当的时机更新它，而且一个都不能漏掉……很快就会变得难以管理。React 提出了另一种思路：把界面拆分成组件。一个组件就是一个描述界面某一部分（一个按钮、一张卡片、一个菜单）的 JavaScript 函数。就像乐高积木一样，你把它们拼装起来构建出完整的页面，而 React 会替你负责让屏幕保持最新。

import { createRoot } from "react-dom/client";

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

const root = createRoot(document.getElementById("root"));
root.render(<Hello />);

Hello 函数就是一个组件：它返回一段看起来像是直接写在 JavaScript 里的 HTML。这种语法叫作 JSX。要记住三条规则：一个组件返回单一的父元素；有些属性会改名（class 变成 className）；每个标签都必须闭合（例如 <img />）。JSX 还有一个超能力：花括号 { } 让你可以把任何 JavaScript 值插入到输出中。

function Welcome() {
  const firstName = "Sarah";
  return <h2>Welcome, {firstName}!</h2>;
}

知识检测

确认你已牢记本课的重点内容。

1. React 是什么？
   • 一种取代 JavaScript 的编程语言
   • 一个用于构建用户界面的 JavaScript 库
   • 一个用于创建网站原型图的绘图工具
2. 在 React 中，组件是什么？
   • 一个返回 JSX 的 JavaScript 函数
   • 一个用于排布网站布局的 CSS 文件
   • 一个用于存储访客信息的数据库
3. 在 JSX 中，花括号 { } 有什么用？
   • 用来写一段 HTML 注释
   • 用来自动创建一个循环
   • 用来把一个 JavaScript 值插入到输出中