前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
react中helloworld小结
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. 元素的子元素（内容） * */
代码案例
<!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>
