上一篇
html里使用jsx
在HTML中使用JSX需引入React库，通过Babel编译，如{ JSX代码}
JSX简介
JSX是JavaScript的语法扩展，允许在JavaScript代码中编写类似HTML的结构，它常用于React框架中，但也可以单独在HTML文件中使用（需配合转换工具）。
在HTML中使用JSX的步骤
| 步骤 | 操作 | 说明 |
|---|---|---|
| 引入Babel | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | 通过Babel将JSX转换为JavaScript |
| 定义JSX结构 | html <div id="app">{1 + 2}</div> | 在HTML中直接编写JSX代码 |
| 添加React库 | <script src="https://unpkg.com/react/umd/react.production.min.js"></script> | 渲染JSX需要React支持 |
| 执行转换 | <script> Babel.transform('#app', { preset: 'react' }).then(result => ReactDOM.render(result.code, document.getElementById('app')) ) </script> | 将JSX转换为可执行的React代码并渲染 |
JSX与普通HTML的区别
| 特性 | 普通HTML | JSX |
|---|---|---|
| 语法扩展 | 纯静态标记 | 支持嵌入变量和表达式（如 {variable}） |
| 属性命名 | class、for | 使用驼峰命名（如 className、htmlFor） |
| 事件绑定 | onclick="func()" | onClick={() => func()}（需小写） |
| 根元素 | 允许多个并列标签 | 必须有一个单一父元素包裹 |
注意事项
- 必须引入React和Babel：JSX需要React库解析,Babel负责语法转换。
- 需用：
<p>当前时间：{new Date().toLocaleTimeString()}</p>。 - 类名替换：HTML中的
class在JSX中需改为className。 - 自闭合标签：如
<img />、<br />,否则可能报错。
相关问题与解答
问题1：JSX可以直接在浏览器中运行吗？
解答：不能，JSX需要通过Babel或Webpack等工具转换为标准的JavaScript代码，浏览器只能识别转换后的React.createElement调用。
问题2：如何在纯HTML项目中使用JSX？
解答：需完成以下步骤：
- 引入Babel和React库（通过CDN或本地文件）。
- 在HTML中编写JSX结构（如
<div id="root">{message}</div>）。 - 用Babel将JSX转换为JavaScript。
- 用ReactDOM渲染转换后的代码到
