react中jsx的语法规则

1.react核心库react.development.js

2.react_dom库，用于支持react操作dom（react-dom.development.js）

3.引入bable，解析jsx语法的库，用于将jsx转换为js(babel.min.js)

上述三个库是写基础react的基本库

下面我将用一个例子来总结jsx语法规则

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
    <style>
        .title {
            color: blue;
            background-color: aqua;
        }
    </style>
</head>

<body>

    <!-- 引入react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom库 ，用于支持react操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 引入babel 解析jsx语法的库，用于将jsx转换为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    </script>

    <!-- 准备一个容器用于渲染接收 -->
    <div id="test"></div>



    <script type="text/babel">

        const myId = 'aiXueXi'
        const myData = 'HeLLo,ReaCt'
        // 创建虚拟DOM
        // toLocaleLowerCase()转换成小写字母
        // toUpperCase()转换成大写字母
        const VDOM = (
            <div>
                <h2 className='title' id={myId.toLocaleLowerCase()}>
                    <span>{myData.toLocaleLowerCase()}</span>
                </h2>
                <h3 className='title' id={myId.toUpperCase()}>
                    <span >{myData.toUpperCase()}</span></h3>
                <input type="text" />
                <good>测试</good>

            </div>

        )


        // 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'))

        

    </script>
</body>

</html>

上面一个例子我简单利用react的jsx创建虚拟dom来进行渲染页面