一、JSX 理解

JSX 全称是 JavaScript XML

它是React定义的一种类似于XML的JS扩展语法，可以理解为是 XML+JS
它是用来创建React虚拟DOM元素，如下代码块所示

var vDom = <h1> Hello World </h1>
# 注意：变量 vDom 它不是字符串，也不是HTML/XML标签，最终会产生一个JS对象

JSX 基本语法

遇到 < 开头的代码，使用标签语法解析（即和 html 同名称的标签转换为 html 同名元素，其他自定义标签需要特别解析）
遇到 { 开头的代码，以JS语法解析，标签中的JS代码必须使用 {} 包含

<body>
<script type="text/javascript" src="../resource/babel.min.js"></script>
<script type="text/javascript" src="../resource/react.development.js"></script>
<script type="text/javascript" src="../resource/react-dom.development.js"></script>

<div id="test1"></div>
<div id="test2"></div>

<script type="text/javascript">
    const value = "I Like you"
    const myId = "XRXS"
    const vDom1 = React.createElement('h2', {id: myId.toLowerCase()}, value.toUpperCase())
    ReactDOM.render(vDom1, document.getElementById('test1'))
</script>

<script type="text/babel">
    // 1.创建虚拟DOM
    var vDom2 = <h3 id={myId.toUpperCase()}> {value.toLowerCase()} </h3>
    // 2.将虚拟DOM渲染到具体DOM容器中
    ReactDOM.render(vDom2, document.getElementById("test2"))
</script>
</body>

babel.js 的作用，因为浏览器不能直接解析JSX代码，需要 babel将其转义成纯JS的代码才能在浏览器执行。只要用了JSX，都要加上 type='text/babel' 来声明需要 babel 来处理代码

二、创建和渲染虚拟DOM元素

创建DOM

纯JS

React.createElement('h2', {id: 'myId'}, value)

<h3 id={ myId }> { value } </h3>

渲染DOM

ReactDOM.render(virtualDOM, containerDOM)，它能够将虚拟DOM元素渲染到页面上的真实容器DOM中展示出来

virtualDOM 参数：纯JS或者JSX创建的虚拟DOM对象
containerDOM 参数：用来包含虚拟DOM元素的真实DOM元素对象，一般是声明的DIV

三、案例效果

案例代码

<!DOCTYPE html>
<html>
<head>
    <title>jsx test</title>
    <meta charset="utf-8"/>
</head>
<body>

<h1>前端框架列表</h1>

<script type="text/javascript" src="../resource/babel.min.js"></script>
<script type="text/javascript" src="../resource/react.development.js"></script>
<script type="text/javascript" src="../resource/react-dom.development.js"></script>

<div id="example1"></div>

<script type="text/babel">

    const names = ['jQuery', 'zepto', 'react', 'vue']
    var ul = (
        <ul>
            {names.map((name, index) => <li key={index}>{name}</li>)}
        </ul>
    )
    // 渲染
    ReactDOM.render(ul, document.getElementById("example1"))

</script>

</body>
</html>

React JSX

一、JSX 理解

JSX 基本语法

二、创建和渲染虚拟DOM元素

创建DOM

渲染DOM

三、案例效果