JSX是什么？

JSX（JavaScript XML） 是 React 中用来 写 HTML 结构 的一种语法，它允许你在 JavaScript 代码中直接写 HTML 代码。

---

JSX 示例

在普通 JavaScript 里，你可能会这样写：

const element = document.createElement("h1");
element.textContent = "Hello, world!";
document.body.appendChild(element);

但是，在 JSX 里，你可以像写 HTML 一样：

const element = <h1>Hello, world!</h1>;

然后用 React 渲染：

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello, world!</h1>;

ReactDOM.createRoot(document.getElementById("root")!).render(element);

注意：JSX 代码 最终会被编译成 JavaScript，并不会直接执行。

---

JSX vs HTML

JSX 和 HTML 很像，但它是 JavaScript 扩展语法，有一些不同点：

HTML	JSX（React）	说明
class="title"	className="title"	JSX 里 class 变成 className
onclick="handleClick()"	onClick={handleClick}	事件属性 要用 {} 括起来
<input disabled>	<input disabled={true} />	布尔值 必须用 {}
style="color: red;"	style={{ color: "red" }}	行内样式 用对象 {}
<img src="logo.png">	<img src={logo} />	动态属性 需要 {}

---

JSX 最终会变成 JavaScript

JSX 其实是 React.createElement() 的语法糖，
例如：

const element = <h1>Hello, world!</h1>;

最终会被转换成：

const element = React.createElement("h1", null, "Hello, world!");

然后 React 会 把它变成真正的 DOM。

---

JSX 里如何写 JavaScript 代码？

JSX 允许你在 {} 里面写 JavaScript 表达式，比如：

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

或者：

const user = { name: "Bob", age: 25 };
const element = <p>姓名: {user.name}, 年龄: {user.age}</p>;

但不能写 if 语句、for 循环，只能写 表达式：

const isLoggedIn = true;
const element = <p>{isLoggedIn ? "已登录" : "请登录"}</p>;

---

JSX 语法总结

1. 必须有一个根元素：

   return (
     <div>
       <h1>标题</h1>
       <p>内容</p>
     </div>
   );
   

   不能这样：

   return (
     <h1>标题</h1>
     <p>内容</p>  // ❌ 这里会报错
   );
   

   如果不想多包裹 div，可以用 Fragment：

   return (
     <>
       <h1>标题</h1>
       <p>内容</p>
     </>
   );
   

2. HTML 属性要用 camelCase：

   <button onClick={handleClick}>点击</button>
   

3. 用 {} 写 JavaScript 代码：

   const name = "React";
   return <h1>Hello, {name}!</h1>;
   

4. CSS class 改成 className：

   <h1 className="title">标题</h1>
   

5. 行内样式要用对象：

   <h1 style={{ color: "red", fontSize: "20px" }}>标题</h1>
   

---

结论

• JSX 让 React 代码更直观，可以像 HTML 一样写 UI
• JSX 不是 HTML，而是 JavaScript 语法扩展，会被编译成 React.createElement()
• JSX 里可以用 {} 语法写 JavaScript 代码
• 所有 HTML 属性必须符合 JavaScript 语法，比如 className、onClick

这样，React 代码就比普通 JavaScript 更简洁、更可读！