Frontend Academy · 课时

JSX：语法与转译

编写 JSX，了解 Babel 如何将其编译为 React.createElement 调用，并掌握以下规则：一个根元素、className 和自闭合标签。

JSX：语法与转译 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 JSX

JSX（JavaScript XML）是一种语法扩展，允许您在 JavaScript 中编写类似 HTML 的标记。它不是浏览器功能——Babel 或 TypeScript 会在运行前将其转换为 JavaScript 函数调用。

JSX 转译

Babel 会将 JSX 转换为 React.createElement() 调用。使用新的 JSX 转换方式（React 17 及更高版本）时，您不需要导入 React——Babel 会自动注入必要的导入语句。

// JSX:
const element = <h1 className="title">Hello</h1>;

// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });

JSX 规则：一个根元素

JSX 表达式必须恰好有一个根元素。请将同级元素包裹在 <div> 中，或使用 Fragment（<></> 或 <React.Fragment>），以避免添加额外的 DOM 节点。

// Error: adjacent elements need a wrapper
return (
  <h1>Title</h1>
  <p>Body</p>
);

// Use Fragment:
return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

className 和 htmlFor

JSX 属性使用 camelCase。由于 class 和 for 是 JavaScript 保留字，因此请改用 className 和 htmlFor。

<div className="card active">
  <label htmlFor="email">Email</label>
  <input id="email" type="email" />
</div>

自闭合标签

在 JSX 中，所有标签都必须正确闭合。没有子元素的元素必须使用自闭合斜杠：<img />、<br />、<input />。

JSX 中的表达式：{}

请使用花括号将任意 JavaScript 表达式嵌入 JSX。变量、函数调用、三元表达式和算术运算都可以使用，但语句（if、for）不可以。

const name = 'Alice';
const count = 5;

return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>You have {count} messages.</p>
    <p>Double: {count * 2}</p>
    {isLoggedIn ? <Dashboard /> : <Login />}
  </div>
);

JSX 与字符串

相邻的文本和 JSX 表达式会自动连接。您可以在元素中自由混合文本和表达式。

<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>

不渲染任何内容：null 和 false

返回 null 或 false 可不渲染任何内容。两者都是有效的 JSX 值，但不会产生 DOM 输出。这对条件渲染很有用。

function Banner({ show }: { show: boolean }) {
  if (!show) return null;  // renders nothing
  return <div className="banner">Important notice!</div>;
}

style 属性 — 对象语法

JSX 中的内联样式使用对象而不是字符串。属性名使用 camelCase。

<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
  Styled box
</div>

JSX 就是 JavaScript

由于 JSX 会被编译为 JavaScript，您可以将 JSX 放入变量中、从函数中返回、将其作为属性传递，以及将其存储在数组中。React 元素就是普通的 JavaScript 对象。

const elements = ['apple', 'banana', 'cherry'].map(fruit => (
  <li key={fruit}>{fruit}</li>
));

return <ul>{elements}</ul>;

TypeScript 与 JSX：.tsx 文件

对于包含 JSX 的 TypeScript 文件，请使用 .tsx 扩展名。TypeScript 会对 JSX 进行类型检查，在编译时捕获属性类型错误和缺少属性的问题。

快速检查

为什么在 JSX 中使用 className 而不是 class？

回顾：JSX

JSX 是 React.createElement() 的语法糖。每个表达式都需要一个根元素或 Fragment。对于保留字属性，请使用 className 和 htmlFor。所有无内容元素都要自闭合。使用 {} 嵌入表达式。返回 null/false 可不渲染任何内容。内联样式使用 camelCase 对象语法。JSX 就是 JavaScript——请将其视为一个值。

常见问题解答

「JSX：语法与转译」课时是免费的吗？

是的 — 「JSX：语法与转译」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「JSX：语法与转译」这节课中我会学到什么？

编写 JSX，了解 Babel 如何将其编译为 React.createElement 调用，并掌握以下规则：一个根元素、className 和自闭合标签。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「JSX：语法与转译」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy