React初学者导入问题：模块语法与JSX解析报错求助

问题根源 #

1. Cannot use import statement outside a module：浏览器默认将JS文件当作普通脚本执行，不支持ES模块的import语法，添加"type": "module"后解决了模块识别问题，但又引发新问题。
2. Unexpected token '<'：浏览器原生不支持JSX语法，JSX是React的语法糖，必须经过转译（比如用Babel）转化为普通JavaScript代码才能被浏览器识别。直接通过浏览器打开本地HTML文件，即使开启ES模块模式，也无法处理JSX。

快速解决方案（推荐初学者使用Vite） #

Vite是轻量快速的前端构建工具，能自动处理JSX转译、模块打包等工作，适合React入门：

1. 创建Vite React项目
   打开终端执行以下命令：

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. 替换业务代码
   进入项目后，修改src/App.jsx为你需要的内容：

function App() {
  return <h1>Hello</h1>
}

export default App

3. 启动开发服务
   执行命令启动本地开发服务器：

npm run dev

在浏览器访问终端输出的本地地址（如http://localhost:5173），即可正常看到渲染的内容。

为什么之前的方式不行？ #

你之前直接在本地HTML中引入JS文件的方式，本质是通过file://协议加载资源，浏览器无法处理JSX转译和依赖解析。而构建工具（如Vite）会在开发阶段实时转译JSX、处理模块依赖，并通过本地服务提供资源，确保代码能被浏览器正确解析。

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