<!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> <style> .red { color: red } </style> </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 title = '我是一个按钮' const src = 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg' const html = '<a href="http://www.baidu.com">百度一下</a>' // jsx => js扩展 // 如果是单行则不需要小括号，多行需要使用小括号括起来 const vnode = (<div> { // 动态属性，直接写{} 不要写引号引起来 } <button title={title}>{title}</button> <hr /> <img src={src} /> <hr /> { // js中class是es6中的定义类的关键词 jsx提供用于class兼容解决方案 className } <div className="red">我是一个需要样式的标签</div> <div> { // js是 for是一个循环的关键词 jsx提供兼容方案 htmlFor } <label htmlFor="username">账号</label> <input type="text" id="username" /> </div> { // 样式 style不能写成字符串，只能对象的方式来写 } <div style={{ color: 'red', fontSize: '20px' }}>style样式</div> { // 解析html元素 // 默认是对html内容进行转义，如果想让html不转义就需要使用jsx提供属性 jsx语法不推荐你在jsx解析html内容 } <div>{html}</div> { // 解析html } <div dangerouslySetInnerHTML={ { __html: html } }></div> </div>) // 把虚拟dom转为真实的dom并挂载到页面中 ReactDOM.render(vnode, app) </script> </body> </html>