导入React的JS代码在VS Code中无法渲染，在线平台可正常运行求助

你的代码在本地VS Code中无法运行，但在线平台可以，核心原因是浏览器原生不支持ES模块导入和JSX语法解析，同时代码里还有几处错误需要修正：

一、修正代码中的错误 #

1. ReactDOM导入路径错误 #

你当前从react包导入ReactDOM，但createRoot API实际属于react-dom/client模块，正确的导入方式应该是：

import React from "react";
import ReactDOM from "react-dom/client"; // 修正导入路径
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>Hi</div>
);

2. HTML中link标签拼写错误 #

rel="styleesheet"多了一个字母e，应改为rel="stylesheet"，虽然这不会影响React渲染，但会导致样式文件无法正常加载：

<link rel="stylesheet" href="style.css" />

二、本地运行React代码的必要配置 #

浏览器无法直接解析JSX语法和ES模块的import语句，所以需要借助工具处理代码，以下是两种简单可行的方式：

方式1：使用CDN引入预编译资源（无需本地打包） #

如果不想配置复杂的打包工具，可以通过CDN引入React、ReactDOM的开发版本，以及用于解析JSX的Babel独立工具。操作步骤：

• 在HTML的head部分添加三个外部脚本，分别对应React、ReactDOM和Babel
• 将原本index.js里的代码直接放到type为text/babel的script标签中，这样Babel会自动解析JSX语法，浏览器就能正确执行代码

方式2：使用官方脚手架创建项目（推荐） #

React官方推荐使用create-react-app或Vite搭建本地开发环境，这些工具会自动配置打包、编译流程：

1. 使用Vite创建项目（启动速度更快）：

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

2. 将你的组件代码替换到项目的src/App.jsx文件中，启动开发服务后即可在本地浏览器看到效果。

三、为什么在线平台可以正常运行？ #

像CodeSandbox、StackBlitz这类在线编码平台，内置了Webpack、Vite等打包工具，会自动帮你编译JSX语法和ES模块代码，所以直接编写代码就能运行，无需手动配置环境。

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