关于原生 HTML 和 React 的 HTML（JSX）语法区别

很多刚学 React 的同学都会有一个疑问：
为什么我在 React 里写的 HTML 跟平时写的不一样？

其实 React 里用的不是标准 HTML，而是 JSX。它长得像 HTML，但背后是 JavaScript 的语法。下面我们来对比一下。

---

1. class 和 className

原生 HTML：

<div class="box">内容</div>

React JSX：

<div className="box">内容</div>

👉 React 里不能用 class，必须用 className，因为 class 是 JavaScript 的关键字。

---

2. 事件写法不同

原生 HTML：

<button onclick="alert('点了')">点我</button>

React JSX：

<button onClick={() => alert('点了')}>点我</button>

👉 React 里事件必须用 驼峰写法（onClick、onChange），而且里面直接写 函数，不用字符串。

---

3. 标签必须闭合

原生 HTML：

<img src="a.png">
<input type="text">

React JSX：

<img src="a.png" />
<input type="text" />

👉 在 JSX 里，所有标签都必须闭合，不然会报错。

---

4. 写动态内容

原生 HTML 一般用 JS 去操作 DOM：

<div id="box"></div>

<script>
  const box = document.getElementById("box");
  const username = "小明";
  box.innerText = username;
</script>

React JSX 直接写在大括号里：

const username = "小明";

<div>{username}</div>

👉 在 JSX 里，只要用 {} 包起来，就能写 JS 变量或者表达式。

---

5. 内联样式

原生 HTML：

<div style="color:red; font-size:20px;">文字</div>

React JSX：

<div style={{ color: "red", fontSize: "20px" }}>文字</div>

👉 注意：

• React 里 style 不是字符串，而是 对象。
• 属性名要用 小驼峰，比如 fontSize。

---

6. 小对比表

功能	原生 HTML	React JSX
样式 class	<div class="box">	<div className="box">
事件绑定	<button onclick="fn()">	<button onClick={fn}>
自闭合标签	<img src="a.png">	<img src="a.png" />
动态内容	DOM.innerText = data	{data}
内联样式	style="color:red"	style={{color:"red"}}

---

7. 总结

• HTML → 适合写静态页面，语法规则比较死板。
• JSX → 更像是在 JS 里“写 HTML”，可以直接插入变量、逻辑，适合组件化开发。

一句话：
👉 JSX 长得像 HTML，但它听的是 JavaScript 的规则。