一、定义

javaScript XML 又称为 jsx,是类似于XML的javaScript扩展语法

XML早期用于存储和传输数据，现在使用JSON,JSON有两个常用的方法:stringify（数据转换为JSON字符串）；parse（JSON字符串转为数据）

二、jsx语法规则

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>jax语法</title>
        <style>
            .title{
                color:red;
            }
        </style>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript" src="js/react.development.js"></script>
        <script type="text/javascript" src="js/react-dom.development.js"></script>
        <script type="text/javascript" src="js/babel.min.js"></script>
        <script type="text/babel">
            const myId='guigu';
            const myData='hello react';
            const VDOM=(
                <div>
                    <h2 className='title' id={myId}><span style={{color:'white'}}>{myData}</span></h2>
                    <input placeholder="请输入内容" />
                </div>
            );
            ReactDOM.render(VDOM,document.getElementById('test'));
        </script>
    </body>
</html>

定义虚拟DOM不用引号，可以使用括号实现HTML换行书写的方式
HTML中混入js表达式、js变量使用{}
当需要定义class时，使用className进行书写
内联样式，用style={{key:value,key:value}}形式书写
虚拟DOM只有一个根标签
标签必须闭合
标签首字母小写jsx转换为对应HTML标签
标签首字母大写jsx寻找对应的组件

React-jsx语法

一、定义

二、jsx语法规则