1、React框架
react是一个声明式的，高效灵活的javascript库。
JSX语法
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素...
// 使用jsx创建两个dom节点(直接声明了所有节点元素和属性)
const ele = (
<div className="demo" style={{ color : 'red' }} >
<p>创建的p节点</p>
<span>创建的span节点</span>
</div>
)
babel.js将jsx语法编译为React.js
const ele = React.createElement(
"div",
{ className:'demo' },
React.createElement("p",null,"创建的p节点"),
React.createElement("span",null,"创建的span节点")
)
2、渲染流程
初始化的渲染流程一般为：
- 使用jsx语法写react，babel会将JSX编译为浏览器能识别的React JS语法（webpack执行）
- 执行ReactDOM.render函数，渲染出虚拟的DOM
- React将虚拟DOM，渲染为真实的DOM
页面更新的流程同样为：
- 页面需要更新时，通过声明式的方法，调用setState通知React
- 然后React会自动调用组件的render方法，渲染出虚拟的DOM
- React会通过diffing算法，对比当前虚拟DOM和需要更新的DOM，然后重新渲染区别部分的真实DOM
3、环境准备
1、安装node.js
4、初步
<!-- react框架 实现 ui 用户界面 关注ui层-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- react-dom 用户交互 处理dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root">
</div>
<script>
const e = React.createElement;
const ele = e('div',{className:'demo'},e('p'),null,'创建的p元素标签');
console.log(ele);
// ReactDOM.render负责渲染dom元素节点
ReactDOM.render(ele,document.querySelector('#root'));
</script>
初步编写.png
image.png
5、JSX语法
babel解析器转换为浏览器能识别的语言
不引入转换工具babel.js或者未在script中加入 type='text/babel'是会出现报错的
image.png
报错信息
报错信息.png
引入后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- react框架 实现 ui 用户界面 关注ui层-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- react-dom 用户交互 处理dom-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--引入转换工具-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
#root {
width: 200px;
height: 100px;
border: 1px solid #eee;
}
.demo {
color: rebeccapurple;
font-size: 22px;
font-weight: 700;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// jsx 在js里写 xml
let ele =(<div className="demo"><p>创建的p元素节点</p></div>)
// ReactDOM.render负责渲染dom元素节点
ReactDOM.render(ele,document.querySelector('#root'));
</script>
</body>
</html>
同样是能够正常的展示出元素节点的
image.png
