<!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 users = ['张三', '李四', '王五', '东炎'] // jsx => js扩展 // 如果是单行则不需要小括号，多行需要使用小括号括起来 const vnode = (<div> { // 一组数组可以直接写变量，就会自动循环解析 } {users} <hr /> <ul> { // 在jsx中循环输出可以使用 map 必须要有return /* users.map((item,index)=>{ return <li>{item}</li> }) */ //users.map((item,index)=><li>{item}</li>) /* users.map((item, index) => { return (<li> <h3>你好世界</h3> {item} </li>) }) */ // 最终写法 key唯一 diff算法所用 users.map((item, index) => ( <li key={index}> <h3>你好世界</h3> {item} </li> )) } </ul> </div>) // 把虚拟dom转为真实的dom并挂载到页面中 ReactDOM.render(vnode, app) </script> </body> </html>