关键是要启用@babel/preset-react并指定runtime模式：classic需手动导入React，automatic模式（React 17+默认）自动注入jsx-runtime，编译为React.createElement或$jsx调用。
要让 Babel 正确把 JSX 编译成标准 JavaScript，关键不是“手动写转换逻辑”，而是启用 @babel/preset-react 并选对运行时模式。它会自动把 <div>Hello</div> 这类语法转成 React.createElement(...) 或更轻量的 $jsx(...) 调用。
安装依赖
确保项目中已安装核心工具和 React 预设：
npm install --save-dev @babel/core @babel/cli @babel/preset-react- 如果使用 Webpack/Vite 等构建工具，通常只需装
@babel/preset-react，其余由工具链自带
配置运行时模式（重点）
Babel 支持两种 JSX 转换方式，必须明确指定，否则可能报错或不生效：
-
classic 模式：需手动导入
React，编译结果调用React.createElement -
automatic 模式（推荐，React 17+ 默认）：无需写
import React from 'react'，Babel 自动注入import { jsx as $jsx } from 'react/jsx-runtime'
配置示例（babel.config.json）：
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“Java免费学习笔记（深入）”；
{
"presets": [
["@babel/preset-react", {
"runtime": "automatic"
}]
]
}
配合构建工具使用
多数现代脚手架（如 Create React App、Vite、Next.js）已内置该预设，无需额外配置。若自行搭建：
- Webpack：在
babel-loader的options.presets中加入@babel/preset-react - Vite：在
vite.config.js的esbuild.jsxInject或 Babel 插件中启用 - 命令行测试：可用
babel src/App.jsx --out-file dist/App.js --presets @babel/preset-react
常见问题排查
如果 JSX 没被转换，先检查：
- 文件后缀是否为
.jsx或.tsx（Babel 默认只处理.js，需在配置中显式支持） - 是否遗漏
"extensions": [".js", ".jsx"]（在 Webpack 或 Babel CLI 中） - 是否误启用了多个 JSX 插件（例如同时配了
@babel/plugin-transform-react-jsx和@babel/preset-react） - 开发环境下是否开了
development: true—— 它会自动加source和self插件，仅用于调试
