前言

本人一直将react，vue，blaze等框架看做原生js的语法糖。所以遇到一些框架中的概念，比如：组件是什么？JSX中的标签<xxx>代表什么？都会想着去调试react源码查看究竟。

今天在调试代码的过程中，发现某些JSX的标签上可以打断点，某些JSX标签上不能打断点。产生了以下疑问：

JSX肯定不是JS支持的语法，之所以能打断点是因为映射关系的存在----找到了映射源 bundle.js
JSX最后被转化为JS，所以中间一定经历过编译的过程。So JSX被转化过程中的AST是什么样的？转化成什么样的JS了？

关于JSX转化成什么样的JS了，可以使用网站查看。

关于JSX被转化过程中的AST是什么样的

准备工作

创建.vscode文件夹，在该文件夹下创建launch.json。在JSON文件中编辑以下内容：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "debug-brk",
      "runtimeExecutable": "node",
			"runtimeArgs": [
				"react17//node_modules//react-scripts//scripts//start.js", // 全路径名
			],
			"timeout": 30000,
			"protocol": "inspector"
    }
  ]
}

从react-scripts包开始追踪webconfig的配置，最终追踪得到node_modules\@babel\plugin-transform-react-jsx\lib\create-plugin.js是编译JSX的源代码。

本文件五百多行代码。我的关注点不在这里，在Ast，所以很明显不能一点点去看。所以上网搜吧哈哈~

参考文章

断点打在了90行：

查看state变量----下图随便标了几个对应的JSX element与ast node之间的对应：

注意：babel会自动创建缓存，所以想要使babel每次都编译react，我的方式是修改源文件。eg：app.js

调试react启动过程，查看JSX对应的ast node

前言

准备工作