<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Hello World</title> <!--引入react的核心库--> <script src="script/react.development.js"></script> <!--引入react的DOM库--> <script src="script/react-dom.development.js"></script> </head> <body> <div id="root"></div> <script> /* * React就是用来代替DOM的 * */ // 通过DOM向页面中添加一个div // 创建一个div // const div = document.createElement('div'); // 创建一个dom元素 // // 向div中设置内容 // div.innerText = '我是一个div'; // // 获取root // const root = document.getElementById('root'); // // 将div添加到页面中 // root.appendChild(div); // 通过React向页面中添加一个div /* * React.createElement() * - 用来创建一个React元素 * - 参数: * 1. 元素名(组件名) * 2. 元素中的属性 * 3. 元素的子元素(内容) * */ const div = React.createElement('div', {}, '我是React创建的div'); // 创建一个React元素 // 获取根元素对应的React元素 // ReactDOM.createRoot() 用来创建React根元素,需要一个DOM元素作为参数 const root = ReactDOM.createRoot(document.getElementById('root')); // 将div渲染到根元素中 root.render(div); </script> </body> </html>