react笔记之第一个helloworld 

<!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>

posted @   前端导师歌谣  阅读(36)  评论(0)  编辑  收藏  举报
相关博文：
· react笔记之第一个helloworld
· react18-学习笔记23-第一个组件ts
· React（三）：Hello,React
· react的”Hello World ！“
· Hello World
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae