ReactJS报Unexpected token错误：页面无内容且控制台提示语法错误

这个报错我太熟了！你遇到的是JSX语法不被原生JavaScript识别的问题——浏览器本身看不懂写在JS代码里的<h1>这类HTML标签，所以才会抛出Unexpected token <的错误。咱们一步步来解决：

核心原因 #

你写的<h1 id='title'...>是JSX语法，它不是原生JavaScript的一部分，必须经过转译（比如用Babel）转换成浏览器能理解的普通JS代码才能运行。如果直接把这段代码放在普通的<script>标签里，浏览器会把<当成非法的JS语法符号。

快速解决方案（用CDN+Babel） #

如果你是直接用本地HTML文件运行，最简单的方法是在index.html中引入React、ReactDOM和Babel的CDN，并且把你的JS代码放在type="text/babel"的脚本标签里。

修改后的完整index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Hello World</title>
    <!-- 引入React和ReactDOM开发版CDN -->
    <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>
</head>
<body>
    <!-- React挂载的容器 -->
    <div id="react-container"></div>

    <!-- 注意这里的type是text/babel，Babel会自动处理里面的JSX -->
    <script type="text/babel">
        // React 18推荐使用createRoot API（旧版render已被弃用）
        const { createRoot } = ReactDOM;
        const root = createRoot(document.getElementById('react-container'));

        const style = {
            backgroundColor: 'orange',
            color: 'white',
            fontFamily: 'verdana'
        };

        root.render(
            <h1 id='title' className='header' style={style}>
                Hello World
            </h1>
        );
    </script>
</body>
</html>

为什么这样改？ #

• 引入Babel的CDN后，它会自动识别type="text/babel"的脚本，把里面的JSX转换成React.createElement()调用（这是浏览器能理解的原生JS）。
• 另外注意：React 18已经不再推荐使用旧的ReactDOM.render()方法，改用createRoot是更规范的写法。

其他可选方案 #

如果你打算长期开发React项目，更推荐使用构建工具（比如Vite、Create React App），它们会自动处理JSX转译、依赖管理等问题，不需要手动引入CDN。比如用Vite初始化项目：

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

之后把你的代码放到src/App.jsx里就能正常运行了。

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