调试React@18.2.0+Babel@7.23.3应用时，如何查看JSX编译源码？

针对create-react-app生成的React 18.2.0 + Babel 7.23.3项目，你可以通过以下几种方式查看JSX转换后的代码：

• 浏览器开发者工具查看编译结果
  打开Chrome DevTools的Sources面板，找到webpack://目录，展开后定位到你的源码文件（如src/App.js），右键点击文件选择View compiled，即可看到Babel转译后的最终JS代码，包括JSX转换后的jsx()调用（React 17+）或React.createElement()调用。

• 使用Babel REPL验证片段代码
  将你的JSX代码片段粘贴到Babel官方的REPL工具中，可实时查看转换后的代码，适合快速验证小代码块的转译效果。

• 本地生成编译后的文件
  若要在本地输出编译后的文件，可按以下步骤操作：

  1. 安装Babel相关依赖：

     npm install --save-dev @babel/cli @babel/preset-react @babel/preset-env
     

  2. 在项目根目录创建.babelrc配置文件：

     {
       "presets": ["@babel/preset-react", "@babel/preset-env"]
     }
     

  3. 执行编译命令，将目标文件转译到指定目录：

     npx babel src/App.js --out-file compiled/App.js
     

  执行完成后，compiled/App.js就是转译后的代码文件。

• 运行时打印组件编译代码
  在组件文件中，直接打印组件函数的字符串形式：

  function App() {
    return <div>Hello World</div>;
  }
  
  console.log(App.toString());
  

  打开浏览器控制台，就能看到该组件被Babel转换后的JS代码。

内容的提问来源于stack exchange，提问作者Harry Zumwalt