为何React脚本内联正常，外部文件引入却无法运行？

我在学习React时开发了一个简易静态应用，单文件实现时无论是直接打开页面还是通过本地http-server部署，都能正常显示Hello React!。但将代码拆分为index.html和index.js后，页面显示空白，无法正常渲染内容。

单文件正常代码 #

<!DOCTYPE html>
<html>
    <head>
    <title>React</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
<body>
    <div id = "root"> </div>
    <script type="text/babel">ReactDOM.render(<h1>Hello React!</h1>, document.getElementById("root"));</script>
</body>
</html>

拆分后的目录结构 #

static_react
|----index.html
|----index.js

拆分后的代码 #

index.html #

<!DOCTYPE html>
<html>
    <head>
    <title>React</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
<body>
    <div id = "root"> </div>
    <script src="index.js" type="text/babel"></script>
</body>
</html>

index.js #

ReactDOM.render(<h1>Hello React!</h1>, document.getElementById("root"))

1. 必须通过HTTP服务器访问 #

直接打开本地index.html文件时，浏览器的同源策略会阻止babel加载并解析外部的index.js文件（因为使用的是file://协议，存在跨域限制）。你需要使用http-server或其他本地HTTP服务器部署项目，再通过http://localhost:xxxx访问页面。

2. 替换为更可靠的Babel浏览器端工具 #

你使用的babel-core@5.8.23是非常老旧的版本，已经停止维护，对外部JSX文件的支持存在缺陷。建议更换为官方维护的@babel/standalone，修改index.html中的Babel引用：

<!-- 替换原来的babel-core script标签 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

新版本的@babel/standalone对外部JS文件的解析更稳定，能避免旧版本的兼容性问题。

3. 补充代码末尾的分号（可选但推荐） #

虽然JavaScript允许省略分号，但某些旧解析器可能因此出现语法错误。给index.js的代码加上分号：

ReactDOM.render(<h1>Hello React!</h1>, document.getElementById("root"));

4. 查看浏览器控制台排查错误 #

打开浏览器开发者工具（F12）的控制台面板，查看是否有报错信息：

• 如果是跨域相关错误：确认已通过HTTP服务器访问
• 如果是语法错误：根据提示调整代码

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