React组件无法渲染求助：按官方文档集成后出现语法报错

两个错误的根本原因 #

1. 不加type="module"时报错：浏览器默认将脚本识别为传统非模块脚本，不支持ES模块的import语法，因此会对import { createRoot }里的{}报错。
2. 加type="module"时报错：浏览器能识别import，但原生不支持JSX语法（也就是代码里的<h1>Hello, world</h1>），<符号被判定为非法语法，因此报错。

另外你代码里还有个额外问题：document.body.innerHTML = '<div id="app"></div>'这行是把转义后的字符串插入body，会导致页面显示<div id="app"></div>文本而非实际DOM元素，还会覆盖原有页面内容，完全没必要保留。

快速解决（无需构建工具） #

适合快速测试，直接在浏览器中运行：

1. 在HTML中先引入React、ReactDOM和Babel的UMD版本（用于编译JSX）：

<!-- 引入React和ReactDOM开发版 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 引入Babel用于编译JSX -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. 修改contact.js，去掉import语句（直接用全局变量ReactDOM），并删除多余的document.body.innerHTML代码：

// 直接使用全局的ReactDOM.createRoot
const root = ReactDOM.createRoot(document.getElementById('sec1'));
root.render(<h1>Hello, world</h1>);

3. 在HTML中引入contact.js时，指定type="text/babel"让Babel编译JSX：

<script type="text/babel" src="./contact.js"></script>

正式项目解决方案（使用构建工具） #

如果是整合到现有正式项目，推荐用Vite（轻量快速）：

1. 在项目目录执行命令初始化Vite React项目：

npm create vite@latest . -- --template react

2. 安装依赖：

npm install

3. 将你的组件逻辑替换到src/App.jsx中，或者新建组件文件。
4. 执行npm run build生成生产环境代码，将dist目录下的文件引入到你的现有HTML中即可。

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