本地无CDN运行含JSX的React文件遇import错误，求配置方案

1. 初始化npm项目 #

在项目文件夹打开终端，执行以下命令生成package.json（管理项目依赖的配置文件）：

npm init -y

2. 安装核心依赖与构建工具 #

安装React、ReactDOM核心库，以及Vite（轻量构建工具，自动处理JSX和ES模块转译）：

npm install react react-dom
npm install -D vite @vitejs/plugin-react

3. 创建Vite配置文件 #

在项目根目录新建vite.config.js，内容如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

4. 修正代码文件 #

修改JS文件（建议重命名为main.jsx，Vite默认识别jsx后缀） #

注意React是默认导出，无需解构；补充缺失的组件定义并添加渲染逻辑：

import React from 'react'
import { createRoot } from 'react-dom/client'

// 补充缺失的组件定义
function Header() {
  return <header>这是头部组件</header>
}

function Body1() {
  return <main>这是主体内容</main>
}

function Footer() {
  return <footer>这是底部组件</footer>
}

function FirstComponent(){
    return (
        <div>
            <Header />
            <Body1 />
            <Footer />    
        </div>
    )
}

// 将组件渲染到页面根节点
const root = createRoot(document.getElementById('root'))
root.render(<FirstComponent />)

修改HTML文件 #

移除原有的script标签，Vite会自动关联入口文件，确保根节点存在即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

5. 启动本地开发服务器 #

在package.json的scripts字段中添加启动命令：

"scripts": {
  "dev": "vite"
}

终端执行以下命令启动服务：

npm run dev

打开终端输出的本地地址（通常为http://localhost:5173），即可看到React项目正常运行。

错误原因说明 #

之前出现的SyntaxError: Cannot use import statement outside a module，本质原因是：

• 浏览器默认不将普通JS文件视为ES模块，无法识别import语法
• 浏览器原生不支持JSX语法，必须经过转译才能运行
  Vite这类构建工具会自动处理ES模块转译、JSX编译，同时帮你管理本地依赖，完全无需依赖CDN。

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