🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## **JSX描述:** * 全称:JavaScript XML,react 定义的一种类似于 XML 的 JS 扩展语法: XML+JS * 作用:用来创建 react 虚拟 DOM(元素)对象 ``` var ele = <h1>Hello JSX!</h1> ``` >[danger]注意:它不是字符串, 也不是 HTML/XML 标签 >注意:它最终产生的就是一个 JS 对象 ,即虚拟DOM * 标签名任意:HTML 标签或其它标签 * 标签属性任意:HTML 标签属性或其它 * 基本语法规则 a. 遇到 <开头的代码, 以标签的语法解析: html 同名标签转换为 html 同名元素, 其它标签需要特别解析 b. 遇到以 { 开头的代码,以 JS 语法解析: 标签中的 js 代码必须用{ }包含 * babel.js 的作用 a. 浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行 b. 只要用了 JSX,script标签都要加上 type="text/babel", 声明需要 babel 来处理 [测试代码](https://c.runoob.com/front-end/61) ```javascript <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> const vDOM = <h1>Hello, world!</h1> console.dir(vDOM) ReactDOM.render( vDOM, document.getElementById('example') ); </script> </body> </html> ```