React.js创建静态页面时遇意外令牌'<'错误求助

你遇到的问题是浏览器无法识别JSX语法中的'<'令牌，核心原因是缺少正确的依赖加载和JSX转译配置，具体问题和修复方案如下：

错误原因分析 #

1. 无效的依赖引用：你的HTML中<script>标签的src="node_modules"是无效路径，浏览器无法加载React、ReactDOM和Babel库，导致JSX语法无法被转译。
2. ES6 import不兼容浏览器环境：直接使用import React from "react"在浏览器中无法生效，除非配置模块类型且对应文件支持，否则浏览器无法解析该语法。
3. JSX未被转译：JSX不是标准JavaScript，需要Babel转译为浏览器能识别的代码，你的配置中没有正确引入Babel来处理这一步。

修复后的代码示例 #

HTML文件 #

<!DOCTYPE html>
<html>
<body>
    <div id="root"></div>
    <!-- 引入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>
    <!-- 嵌入React代码，type设为text/babel让Babel处理 -->
    <script type="text/babel">
        function Temp() {
            return (
                <h1>Test</h1>
            )
        }
        ReactDOM.render(<Temp />, document.getElementById("root"));
    </script>
</body>
</html>

关键修改说明 #

• 替换依赖引用：用官方CDN链接替代无效的node_modules路径，确保浏览器能正确加载React、ReactDOM和Babel。
• 移除ES6 import：改用CDN提供的全局React和ReactDOM变量，避免浏览器解析import语法出错。
• 配置Babel转译：将React代码放在type="text/babel"的script标签内，让Babel自动转译JSX为标准JavaScript，解决'<'令牌识别错误。

如果需要将React代码放在单独的JS文件中，只需调整HTML的script标签：

<script type="text/babel" src="./your-react-script.js"></script>

注意JS文件中同样不需要import语句，直接使用全局的React和ReactDOM即可。

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