React渲染Hello World时报Uncaught SyntaxError如何解决

你遇到的Uncaught SyntaxError: expected expression, got '<'是多个代码问题叠加触发的，核心问题点如下：

• 最直接的报错来源：你在JS文件里写的JSX语法（即<h1>Hello World</h1>这种类HTML写法）没有经过任何转译，浏览器原生JS不支持解析这类语法。解析器碰到JS里的第一个<时，会默认把它当成算术小于号处理，结果后面跟着的是标签名，不符合JS表达式的语法规则，就直接抛出了这个错误。
• 挂载节点不匹配：JS代码中通过document.getElementById('root')查找挂载容器，但你的HTML页面里写的容器id是react，二者不匹配，就算语法问题解决，也找不到渲染的挂载点。
• 脚本加载顺序与模块语法错误：
  1. 你在JS文件中使用了import React from 'react'这类裸模块导入的写法，浏览器原生ES模块无法识别没有文件路径的导入名，这类写法必须经过构建工具处理才能运行。
  2. 你把自己的业务脚本<script type="module" src="script.js"></script>放在了React、ReactDOM的CDN引入脚本前面，就算语法正确，执行脚本时React的全局变量还未加载，也会出现引用错误。

零构建最简跑通方案 #

不需要配置webpack、babel等复杂构建工具，直接调整现有代码即可运行：

• 调整HTML结构的脚本加载顺序，先加载依赖库，再加载业务脚本
• 去掉JS文件中不需要的裸import语句，CDN引入的React、ReactDOM会直接挂载在全局对象上，可直接调用
• 引入浏览器端的Babel转译脚本，处理JSX语法，让浏览器能识别这类写法
• 统一挂载容器的id，让JS查找的节点和HTML中的节点完全匹配

修正后的完整代码示例：

<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" href="#">
        <title>List</title>
    </head>
    <body>
        <!-- 统一id为root，和JS代码中的查找规则匹配 -->
        <div id="root"></div>
        <!-- 先加载React相关依赖 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
        <!-- 引入浏览器端Babel，用于转译JSX语法 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
        <!-- 标记脚本为Babel需要转译的类型，替换原来的type="module" -->
        <script type="text/babel" src="script.js"></script>
    </body>
</html>

// 无需手动import，依赖已通过CDN挂载到全局
const myelement = <h1>Hello World</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

正式项目开发方案 #

如果需要长期开发React项目，建议使用官方脚手架搭建工程，脚手架会自动配置好JSX转译、模块解析、开发服务器等能力，不需要手动处理转译逻辑，只需要注意：

• 挂载容器的id要和代码中查找的节点保持一致（脚手架默认的容器id为root）
• 不要在项目HTML中直接引入React的CDN脚本，通过包管理器安装对应依赖即可。

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