本文旨在解决在浏览器环境中直接使用react和babel时，常见的javascript文件加载失败及react组件渲染问题。我们将详细探讨`script`标签的`type`属性、react版本兼容性（`reactdom.render`与`createroot`）以及本地文件协议（`file://`）导致的cors错误，并提供正确的配置与实践方法，确保您的react应用能够顺利运行。
在前端开发中，尤其是在学习React初期，开发者可能会选择直接在HTML文件中引入React、ReactDOM和Babel库，以便在浏览器中快速体验JSX语法。然而，这个设置过程常常会遇到一些看似简单却容易让人困惑的问题，例如JavaScript文件无法加载、页面空白或控制台报错。本教程将深入分析这些问题及其解决方案。
当您在HTML中直接使用Babel（通过babel-standalone库）来转换JSX代码时，浏览器需要知道哪些script标签包含的是需要Babel处理的JSX代码，而不是普通的JavaScript。这就是type="text/babel"属性的作用。
问题分析： 如果您的React组件代码（包含JSX）存储在一个独立的.js文件中，并且该文件的script标签没有设置type="text/babel"，那么Babel将不会对其进行转换。浏览器会尝试将其作为标准JavaScript执行，由于JSX不是标准的JavaScript语法，这将导致语法错误或脚本无法执行。
解决方案： 确保所有包含JSX的外部JavaScript文件都通过以下方式引入：
<script src="script.js" type="text/babel"></script>
示例代码： 假设您的script.js文件内容如下：
// script.js
ReactDOM.render(<p>Hello React!</p>, document.getElementById("test"));您的HTML文件应确保正确引入Babel和设置type属性：
<!DOCTYPE html>
<html>
<head>
<title>React Babel Setup</title>
<link rel="stylesheet" href="index.css">
<!-- 引入React和ReactDOM库 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 引入babel-standalone库 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<!-- 引入包含JSX的脚本，并指定type="text/babel" -->
<script src="script.js" type="text/babel"></script>
</body>
</html>React 18引入了新的根API，即ReactDOM.createRoot，以支持并发渲染等新特性。如果您在使用React 18，但仍然尝试使用React 17及以前版本的ReactDOM.render方法，控制台将会出现警告信息，提示您升级到新的API。
问题分析：
如果在React 18环境下继续使用ReactDOM.render，虽然在开发模式下可能仍然有效并显示内容，但会收到弃用警告，并且无法充分利用React 18的新特性。
解决方案： 根据您引入的React版本选择正确的渲染方法。
示例代码：
对于React 17及以前版本： HTML头部引入React 17：
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
JavaScript文件 (script.js)：
// script.js (React 17)
ReactDOM.render(<p>Hello from React 17!</p>, document.getElementById("test"));对于React 18及以后版本： HTML头部引入React 18：
<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>
JavaScript文件 (script.js)：
// script.js (React 18)
const root = ReactDOM.createRoot(document.getElementById("test"));
root.render(<p>Hello from React 18!</p>);当您在浏览器中直接打开HTML文件（即使用file://协议）时，浏览器出于安全考虑，会阻止通过XMLHttpRequest或fetch等API加载本地文件。这会导致Babel在尝试读取您的script.js文件时，触发“Cross origin requests are only supported for protocol schemes: http, https, ...”的CORS错误。
问题分析：babel-standalone在内部需要通过HTTP请求来获取并转换外部脚本文件。当HTML文件通过file://协议加载时，它无法发起跨域（实际上是“同源策略”阻止了对本地文件的XHR请求）请求来获取script.js，因此Babel无法读取并转换您的代码。
解决方案： 您需要通过一个本地HTTP服务器来提供您的HTML文件。
推荐方法：
通过上述任一方法，您的文件将通过http://协议提供，从而避免CORS错误，允许Babel正确加载并转换您的JavaScript文件。
在浏览器环境中直接使用React和Babel进行开发时，解决脚本加载和渲染问题的关键在于：
遵循这些指导原则，您将能够更顺畅地在浏览器中进行React的学习和开发实践。当项目进入生产阶段时，务必考虑采用专业的构建工具进行代码预编译，以优化性能和用户体验。
以上就是深入理解React与Babel：浏览器环境下的脚本加载与渲染指南的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
608
收藏
