其文档阐述：https://zh-hans.legacy.reactjs.org/docs/introducing-jsx.html
JSX（JavaScript XML）是一种在React中用于声明UI组件的语法扩展。它允许你在JavaScript代码中编写类似于HTML的标记，用于描述组件的结构和外观。
JSX看起来类似于HTML，但实际上是一种JavaScript的语法扩展。它允许你使用尖括号（<>）包裹元素，并使用类似HTML的标签来表示组件的结构。以下是一个简单的JSX示例：
const title = <h1>123123123</h1>当然使用JSX我们就不需要像使用JS时需要重复的去创建DOM元素，来进行相关的展示。下面就是两种方法对应创建虚拟DOM所使用的方式
其中我们可以使用React中的createElement方法，该方法和JS中创建DOM类是，对应的三个变量分别是 DOM元素的类别 h1 div。第二个是其对应的参数。例如颜色 类名。 第三个是所创建DOM元素中所展示的内容。
虽然说这种写法看起来很简单，会让我们更习惯于这种写法，毕竟创建DOM谁不会？但是你会发现，当我们在h1中要嵌套定义是，我们就只能将第三个参数又重写createElement，嵌套几次就重写几次，这样就会很麻烦。
const name = 'shuxiaoxii';
const element = React.createElement('h1', {style: {color: 'red'}}, `hello, ${name}`);
ReactDOM.render(element, document.getElementById('root')
当我们使用jsx时就不会出现这种情况，我们可以想些html这样来进行相关的描写，从而简化我们开发的相关难度。
const name = 'shuxiaoxii';
const element = <h1 style={ {color: 'red'}}>Hello {name}</h1>
ReactDOM.render(element, document.getElementById('root'));
虽然说在react中我们是使用了jsx来进行编码，但是浏览器还是会将我们所写的代码例如第二中转化为第一中来进行编译。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/></head>
<body>
<div id="root"></div>
<script src="./js/react.production.min.js"></script>
<script src="./js/react-dom.production.min.js"></script>
<script type='text/javascript'>
// const name = 'zsz';
// const childrenElement = React.createElement('span', {style: {color: 'red'}}, `hello, ${name}`);
// const element = React.createElement('h1', {style: {color: 'red'}}, childrenElement);
// ReactDOM.render(element, document.getElementById('root'));
/******************** 以上代码等价于 ************/
let func = new Function('name','const childrenElement = React.createElement(\'span\', {style: {color: \'red\'}}, `hello, ${name}`);\n' +
' const element = React.createElement(\'h1\', {style: {color: \'red\'}}, childrenElement);\n' +
' ReactDOM.render(element, document.getElementById(\'root\'));');
func('zsz');</script>
</body>
</html>
JSX的引入使得在React中编写组件变得更直观、易读和易写。它提供了一种类似HTML的语法扩展，使得开发者可以更方便地描述组件的结构、属性和内容，提高了开发效率和代码可读性。