react的jsx语法是怎样解析的

首先我们来看看下面的代码

  import "react" from "react";
  const element = (<div>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div>1</div>
        <div>2</div>
</div>)
console.log(element)

问题来了，element是如何输出上图所示的结构的？

环境配置

安装react和babel

npm i react react-dom --save
npm i @babel/core @babel/preset-env @babel/plugin-transform-react-jsx --save-dev

配置babel

{
   
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {
   
        {
   
            "presets": [
                "@babel/preset-env"
            ],
            "plugins