无需npm start与create-react-app，解决React在index.html运行异常问题

问题根源 #

1. 初始报错是因为浏览器默认不识别ES模块的import语法，且未给脚本配置正确的模块环境。
2. 改为text/babel后页面空白，是因为缺少Babel编译依赖，同时未正确引入全局可用的React、ReactDOM版本，导致import无法解析、JSX也未被编译。

具体修改步骤 #

1. 修正index.html的脚本配置 #

需要引入React、ReactDOM的全局可用版本，以及Babel编译脚本，同时标记组件脚本的正确类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bill Details</title>
    <!-- 引入React和ReactDOM的UMD版本，全局暴露React、ReactDOM对象 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入Babel独立编译脚本，用于解析JSX语法 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="billTable"></div>
    <!-- 标记脚本类型为text/babel，让Babel自动编译JSX -->
    <script src="BillTable.js" type="text/babel"></script>
</body>
</html>

2. 修正BillTable.js代码 #

由于已通过全局脚本引入React和ReactDOM，无需再使用import语句，直接调用全局对象即可：

// 移除无效的import语句，直接使用全局的React、ReactDOM
function BillTable() {
    return <h1>HELLO TABLE</h1>;
}

ReactDOM.render(<BillTable/>, document.getElementById("billTable"));

验证 #

直接打开修改后的index.html，或通过Express服务器运行，控制台无报错，页面将正常渲染出HELLO TABLE标题。

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