React JSX
React 使用 JSX 来替代常规的 JavaScript。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript">
const msg= 'I Like You!';
const myId= 'Abc';
//创建虚拟Dom元素
const vDom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase())
//渲染虚拟Dom
ReactDOM.render(vDom1,document.getElementById('test1'))
</script>
<script type="text/babel">
//创建虚拟Dom元素
const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
//渲染虚拟Dom
ReactDOM.render(vDom2,document.getElementById('test2'))
</script>
</body>
</html>
效果：
虚拟DOM
1) React提供了一些API来创建一种 `特别` 的一般js对象
- var element = React.createElement('h1', {id:'myTitle'},'hello')
- 上面创建的就是一个简单的虚拟DOM对象
2) 虚拟DOM对象最终都会被React转换为真实的DOM
JSX
1) 全称: JavaScript XML
2) react定义的一种类似于XML的JS扩展语法: XML+JS
3) 作用: 用来创建react虚拟DOM(元素)对象
- var ele = <h1>Hello JSX!</h1>
- 注意1: 它不是字符串, 也不是HTML/XML标签
- 注意2: 它最终产生的就是一个JS对象
4) 标签名任意: HTML标签或其它标签
5) 标签属性任意: HTML标签属性或其它
6) 基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
7) babel.js的作用
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
3) 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
渲染虚拟DOM(元素)
1) 语法: ReactDOM.render(virtualDOM, containerDOM)
2) 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3) 参数说明
- 参数一: 纯js或jsx创建的虚拟dom对象
- 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
建虚拟DOM的2种方式
1) 纯JS(一般不用)
React.createElement('h1', {id:'myTitle'}, title)
2) JSX:
<h1 id='myTitle'>{title}</h1>
注意点：
* 标签必须有结束
* 标签的class属性必须改为className属性
* 标签的style属性值必须为: {{color:'red', 12}}
练习例子：实现一个列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<h2>四大名著列表</h2>
<div id="test"></div>
<script type="text/babel">
const names=['三国演义','西游记','红楼梦','水浒传']
//创建虚拟Dom元素
const vDom = (
<ul>
{
//使用数组的map方法，将数据数组转换为标签数组
names.map((name,index)=><li key={index}>{name}</li>)
}
</ul>
)
//渲染虚拟Dom
ReactDOM.render(vDom,document.getElementById('test'))
</script>
</body>
</html>
结果：
