免编程4.1声道功放方案：JAB6与DIPO2模块化组合搭建指南
2026/8/23 20:44:27
从今天开始学习React，学习笔记记录。
参考来源：https://www.bilibili.com/video/BV1wy4y1D7JT?p=5&vd_source=ee72dd280771c701b7484b49fa600ff3
一、React简介
1、官网
英文官网:https://reactjs.org/
中文官网:https://react.docschina.org/
2、介绍描述
1）用于动态构建用户界面的JavaScript库(只关注于视图)
2）由Facebook开源
3、React的特点
1）声明式编码
2）组件化编码
3）React Native编写原生应用
4）高效（优秀的Diffing算法）
4、React高效的原因
1）使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。
2）DOM Diffing算法,最小化页面重绘
二、Hello React
1、项目结构
2、代码片段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello-react</title> </head> <body> <!-- 准备好一个容器--> <div id="test"></div> <!-- 引入react核心库--> <script src="../js/react.development.js" type="text/javascript"></script> <!-- 引入react-dom, 用于支持react操作dom--> <script src="../js/react-dom.development.js" type="text/javascript"></script> <!-- 引入babel, 用于将jsx 转为js--> <script src="../js/babel.min.js" type="text/javascript"></script> <script type="text/babel"> /*这里一定要写babel*/ //1 创建虚拟DOM const vDom = <h1>Hello,React</h1>/*此处一定不要写引号，因为不是字符串*/ //2 渲染虚拟dom到页面 ReactDOM.render(vDom, document.getElementById('test')); </script> </body> </html>