本文介绍了React，一个用于构建用户界面的JavaScript库，强调其声明式编码和组件化特性。React的核心库包括react.js和react-dom.js，而Babel库则用于将JSX语法转换为JavaScript。文章详细讨论了如何使用JS和JSX创建虚拟DOM，并展示了示例代码。
目录
4.2：react-dom.js：提供操作DOM的react扩展库。
4.3：babel.min.js：解析JSX语法代码转为JS代码的库。
1. 什么是React
1.用于动态构建用户界面的 JavaScript 库(只关注于视图)
2.由Facebook开源
2. 官网地址
- 英文官网: https://reactjs.org/
- 中文官网: https://react.docschina.org/
3. React的特点
3.1：声明式编码
3.2：组件化编码
3.3：React Native 编写原生应用
3.4：高效（优秀的Diffing算法）
4. 相关js库
4.1：react.js：React核心库
4.2：react-dom.js：提供操作DOM的react扩展库。
4.3：babel.min.js：解析JSX语法代码转为JS代码的库。
5.创建虚拟dom的两种方式
5.1：js创建虚拟dom
js创建的话会比件繁琐，不利于代码的编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="test"></div>
</body>
<!-- 引入核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<script type="text/javascript">
const VDOM = React.createElement("h1",{id:"box"},"你好啊",React.createElement("span",{id:"header"},"我特别好"))
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</html>5.2：jsx创建虚拟dom
jsx需要引入babel，用来转换jsx语法，最终会转换为js的写法，用jsx必然是因为简洁，方便搭建页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 创建容器 -->
<div id="test">
</div>
</body>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 将jsx转换为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
//创建虚拟dom
const VDOM = <h1>hello react</h1>
// 将虚拟dom挂载到真实dom
ReactDOM.render(VDOM,document.getElementById("test"))
</script>
</html>
7933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
