<!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>
右侧赞助一下 代码改变世界一块二块也是爱
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步