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', width: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>