理解 JSX：写给 React 新手的第一个 JSX 入门指南
当我第一次接触 React，最让人疑惑的往往不是 Hooks，也不是组件，而是那段“在 JavaScript 里写 HTML”般的语法——JSX。
我的第一反应是：
“它到底是 JS 还是 HTML？为什么可以写成这样？”
1. JSX 是什么？
一句话概括：
JSX 是一种允许你在 JavaScript 中描述界面的语法扩展（xml-in-js）。
它不是模板语言，也不是字符串，而是会被编译为 JavaScript 函数调用。
例如：
<h1>Hello React</h1>
会被编译为：
createElement('h1', null, 'Hello React');
JSX 的存在让 UI 的编写更加直观，同时仍然保留了 JavaScript 的灵活性。
2. 为什么现代前端都采用组件化 + JSX 的模式？
无论是 Vue 还是 React，它们的核心理念都指向三个方向：
- 响应式（Reactive）
- 数据绑定（Data Binding）
- 组件化（Component）
React 的做法更纯粹，也更激进：
- 页面由组件树组成，而不是由 DOM 树驱动
- UI 与逻辑以函数的形式组织
- 状态变化会驱动界面重新渲染
因此，React 的学习门槛看似更高，但它的设计非常一致、合理，一旦理解，就能写出高度可维护的代码。
3. 组件与 JSX：真正的关系是什么？
你可以将 React 组件理解为：
一个由 JS + HTML（通过 JSX）+ CSS 组成的独立、可复用的界面单元。
JSX 描述 UI
JavaScript 负责逻辑
Hook 管理状态
CSS 负责样式
例如，一个非常典型的组件如下：
function App() {
const [name, setName] = useState("vue");
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<>
<h1>Hello <span className="title">{name}!</span></h1>
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
{isLoggedIn ? "退出登录" : "登录"}
</button>
</>
);
}
这就是组件化和 JSX 的结合——更像是在写功能模块，而不是仅仅操作 DOM。
4. JSX 的重要规则（新手最容易踩坑的地方）
1. 必须返回一个父级节点
通常用 Fragment 简化：
<>
...
</>
2. class 必须写成 className
因为 class 是 JavaScript 保留字。
<span className="title">React</span>
3. JSX 内可以写 JS 表达式
通过花括号 {}：
<h1>{name}</h1>
4. 条件渲染使用三元表达式
{isLoggedIn ? <p>已登录</p> : <p>未登录</p>}
5. 列表渲染必须使用 key
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
这些都是 JSX 的基本规则，理解后会让你的 React 开发更加顺畅。
5. JSX 在实际组件中的完整示例
下面是一段融合了 JSX、状态管理、条件渲染与列表渲染的示例代码，它展示了 JSX 在真实项目中的完整使用方式：
import { useState, createElement } from 'react';
import './App.css';
function App() {
const [name, setName] = useState("vue");
const [todos] = useState([
{ id: 1, title: "学习 React", done: false },
{ id: 2, title: "学习 Node", done: false }
]);
const [isLoggedIn, setIsLoggedIn] = useState(false);
setTimeout(() => {
setName("react");
}, 3000);
const toggleLogin = () => {
setIsLoggedIn(!isLoggedIn);
};
const element = <h2>JSX 是 React 的 UI 描述语法</h2>;
const element2 = createElement('h2', null, 'JSX 会被编译成 createElement');
return (
<>
{element}
{element2}
<h1>Hello <span className="title">{name}!</span></h1>
{todos.length > 0 ? (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
) : (
<div>暂无待办事项</div>
)}
{isLoggedIn ? <div>已登录</div> : <div>未登录</div>}
<button onClick={toggleLogin}>
{isLoggedIn ? "退出登录" : "登录"}
</button>
</>
);
}
export default App;
这段示例几乎涵盖了所有 React 新手会用到的 JSX 语法，理解它对掌握 React 至关重要。
6. 常见疑问解答
1. JSX 是不是 HTML？
不是，只是看起来像。它最终会被编译成 JavaScript 函数。
2. JSX 是必须学的吗？
是的，所有 React 项目都依赖它。
3. JSX 是模板语言吗？
不是。它并不会像传统模板一样解析成字符串，而是直接转为 JavaScript 的结构描述。
7. 为什么说“理解 JSX = 入门 React 的关键一步”？
React 的核心理念是：
UI = f(state（状态）)
而 JSX 是用来描述这个 UI 的最佳方式。
当你的状态更新时，JSX 表达的界面也会自动更新。
因此，理解 JSX 不仅仅是学会一种语法，而是理解 React 运作方式的第一步。
