什么是JSX？
JSX 是 JavaScript XML 的缩写，是 React 中用来描述用户界面的语法（其实可以看作是JavaScript的扩展语法）。可以把它看作是一种将 HTML 与 JavaScript 结合在一起的方式，使得在 JavaScript 中写 HTML 变得简单和直观。
为什么要用JSX？
在使用 React 时，JSX 是很方便的。我们可以用类似 HTML 的语法来写 React 组件，这样的好处是：
- 可读性强：代码看起来更像传统的 HTML，容易理解。
- 写起来简单：可以直接在 JavaScript 代码中写 HTML，不需要字符串拼接或模板引擎。
JSX 的基本语法
1. 元素渲染
在 JSX 中，我们可以直接使用 HTML 标签：
const element = <h1>Hello, world!</h1>;
这个 element 就是一个 JSX 元素，表示一个 <h1> 标签，其内容是 “Hello, world!”。
2. 嵌套元素
JSX 允许嵌套元素，就像在 HTML 中一样：
const element = (<div><h1>Hello, world!</h1><p>This is a paragraph.</p></div>
);
这里，我们使用了一个 <div> 标签，里面嵌套了一个 <h1> 标签和一个 <p> 标签。
3. JavaScript 表达式
在 JSX 中，我们可以使用大括号 {} 来插入 JavaScript 表达式：
const name = 'husu';
const element = <h1>Hello, {name}!</h1>;
这个 element 会渲染为 <h1>Hello, husu!</h1>。
JSX 的注意事项
1. 每个 JSX 元素都需要一个根元素
JSX 代码必须包含在一个根元素内。例如，以下代码会报错：
// 错误的 JSX 代码
const element = (<h1>Hello, world!</h1><p>This is a paragraph.</p>
);
我们需要用一个 <div> 或其他元素将它们包起来：
// 正确的 JSX 代码
const element = (<div><h1>Hello, world!</h1><p>This is a paragraph.</p></div>
);
2. 使用类名
在 JSX 中，不能直接使用 class 作为属性，因为 class 是 JavaScript 的保留字。React官方将这个地方做了区分，需要使用 className：
const element = <h1 className="greeting">Hello, world!</h1>;
3. 自闭合标签
对于没有子元素的标签，需要使用自闭合标签的语法：
const element = <img src="logo.png" alt="Logo" />;
注意，这里的 <img /> 标签末尾有一个斜杠。
JSX 是如何工作的？
JSX 不是浏览器可以直接理解的。当浏览器看到JSX时候，内心是这样的："这是哪个哦？认不到的嘛，有没有哪个帮我翻译一下哟？"这个时候，有一个大兄弟，它叫Babel，他就举手：“哎，浏览器大哥，这个我认得到，我给你翻译一哈。” Babel大兄弟（编译工具）就将JSX转换成普通的 JavaScript 代码。如下面的 JSX 代码：
const element = <h1>Hello, world!</h1>;
会被编译成：
const element = React.createElement('h1', null, 'Hello, world!');
这个 React.createElement 函数会返回一个描述页面上元素的对象，这个对象就是我们所说的 “React 元素”。
使用 JSX 构建 React 组件
JSX 通常用于构建 React 组件。以下是一个简单的例子：
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="husu" />;
在这个例子中，我们定义了一个 Welcome 组件，它使用了一个 props 参数，并返回一个包含 props.name 的 <h1> 标签。然后，我们使用 JSX 来渲染这个组件。
总结
JSX 是 React 中一种非常强大的工具，我们可以在 JavaScript 中编写类似 HTML 的代码，从而使得构建界面变得更加简单和直观。记住以下几点：
- JSX 让你可以直接在 JavaScript 中编写 HTML。
- 使用大括号
{}可以在 JSX 中插入 JavaScript 表达式。 - 每个 JSX 代码块必须有一个根元素。
- 使用
className而不是class来定义类。 - JSX 需要通过编译工具转换为普通的 JavaScript。
)
