<!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>
react笔记之第一个helloworld
2023-02-09
61
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
react笔记之第一个helloworld
目录
相关文章
|
3月前
|
前端开发
JavaScript
UED
|
4月前
|
前端开发
JavaScript
Java
|
前端开发
API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
83
0
0
|
前端开发
|
6月前
|
前端开发
JavaScript
|
前端开发
前端笔记：React的form表单全部置空或者某个操作框置空的做法
在React框架前端开发中，经常会有弹出框的开发，涉及到弹出框，难免就会有表单。一般在关闭弹出框或者对表单联动时，往往都需要考虑对表单进行置空操作了。
100
0
0
|
Web App开发
前端开发
JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
74
0
0
|
JavaScript
前端开发
调度
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
119
0
0
|
前端开发
|
前端开发
热门文章
最新文章
1
React-Native 爬坑
2
react-native-easy-app 详解与使用之（三） View，Text，Image，Flatlist
3
一段探索React自建内部构造的旅程
4
React + MobX 快速上手1
5
React环境创建
6
React工作47:react中initialValue和value不能一起定义
7
react-06-class组件-基础
8
解密传统组件间通信与React组件间通信
9
React中的Virtual DOM(看这一篇就够了)
10
React Native-组件的引用
1
React useMemo钩子指南：优化计算性能
94
2
掌握React中的useCallback：优化性能的秘诀
98
3
深入理解React中的useReducer：管理复杂状态逻辑的利器
210
4
掌握React中的useContext：访问父组件数据的神奇技巧
150
5
掌握React中的useEffect：函数组件中的魔法钩子
157
6
深入理解React中的useState：函数组件状态管理的利器
300
7
React Hooks：让你轻松掌握函数组件的状态与管理
122
8
React中渲染html结构---dangerouslySetInnerHTML
57
9
vue中nextTick函数和react类似实现
222
10
探索React中的类组件和函数组件
74