嵌入JS表达式
在jsx语法中，要把JS代码写到{ }中，所有标签必须要闭合。
let num = 100 let bool = false; // JSX 语法 var myh1 = ( <div> {/* 我是注释 */} {num} <hr /> {/* 三目运算 */} {true ? "条件为真" : "条件为假"} </div> )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hell world</title> </head> <body> <!-- 用于内容显示容器 挂载点 --> <div id="app"></div> <!-- react核心类库 --> <script src="./js/react.development.js"></script> <!-- dom操作 --> <script src="./js/react-dom.development.js"></script> <!-- 解析jsx语法的兼容库 --> <script src="./js/babel.min.js"></script> <script type="text/babel"> const app = document.querySelector('#app') const num = 11 // 如果是单行则不需要小括号，多行需要使用小括号括起来 const vnode = (<div> { // 注释也是标签 注释不会解析到html中的 // 我是一个单行注释 /* 我是一个多行注释 */ } <h3>您的年龄为：{num} 岁</h3> <hr /> { /* 三目运算 */ } <div>{num > 20 ? '老年' : '儿童'}</div> </div>) // 把虚拟dom转为真实的dom并挂载到页面中 ReactDOM.render(vnode, app) </script> </body> </html>