JSX 是 JavaScript 的一种语法扩展，它允许在 JavaScript 代码中直接编写类似 HTML 的标记，用于描述用户界面的结构。JSX 最常用于 React 应用程序中，但也可以与其他框架或库一起使用。
下面是 JSX 和普通 JavaScript 的一些区别：
1、语法：JSX 允许在 JavaScript 代码中直接使用类似 HTML 的标记，而不需要额外的模板语法或字符串拼接。这使得编写和理解组件的结构更加直观。
示例：
// JSX
const element = <div>Hello, world!</div>;// 普通 JavaScript
const element = React.createElement('div', null, 'Hello, world!');
2、表达式：在 JSX 中，可以直接使用 JavaScript 表达式，包括变量、函数调用等。这使得动态生成 UI 变得更加容易。
示例：
const name = 'John';
const element = <div>Hello, {name}!</div>;
3、
属性：JSX 中的属性可以像 HTML 中一样直接写在标记中，并且可以使用 JavaScript 表达式作为属性的值。
示例：
const color = 'blue';
const element = <div style={{ color: color }}>Hello, world!</div>;4、
Class vs. className：在 JSX 中，使用 class 关键字会产生语法错误，因为它是 JavaScript 中的保留字。因此，在 JSX 中，用于指定 CSS 类的属性应该使用 className。
示例：
// JSX
const element = <div className="container">Hello, world!</div>;总的来说，JSX 提供了一种更加直观和便捷的方式来描述用户界面的结构，使得在 JavaScript 中编写和操作 UI 变得更加方便和灵活。
)
