<!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
60
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
react笔记之第一个helloworld
目录
相关文章
|
3月前
|
前端开发
JavaScript
UED
|
4月前
|
前端开发
JavaScript
Java
|
前端开发
API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
82
0
0
|
前端开发
|
6月前
|
前端开发
JavaScript
|
前端开发
前端笔记：React的form表单全部置空或者某个操作框置空的做法
在React框架前端开发中，经常会有弹出框的开发，涉及到弹出框，难免就会有表单。一般在关闭弹出框或者对表单联动时，往往都需要考虑对表单进行置空操作了。
94
0
0
|
Web App开发
前端开发
JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
70
0
0
|
JavaScript
前端开发
调度
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
115
0
0
|
前端开发
|
前端开发