本文旨在解决初学者在使用react js时，将javascript文件链接到html并进行渲染时遇到的常见问题。核心内容包括正确配置`type="text/babel"`以启用浏览器内jsx转换，以及理解`reactdom.render`与`reactdom.createroot`在不同react版本间的兼容性差异。文章还将提供完整的代码示例和重要注意事项，帮助开发者顺利搭建基础react开发环境。
在学习React JS初期，开发者常会尝试通过直接引入CDN链接来快速搭建一个实验环境。然而，在这个过程中，可能会遇到JavaScript文件无法正确加载或React组件无法渲染到页面的问题。这通常涉及两个关键点：JSX代码的转换机制和React版本的API兼容性。
React应用通常使用JSX语法来描述UI，这是一种JavaScript的语法扩展。浏览器本身无法直接解析JSX，需要一个转换器将其编译成标准的JavaScript代码。在没有构建工具（如Webpack、Vite）的简单环境中，我们通常会引入babel-standalone库来实现浏览器内的JSX转换。
核心问题：当使用babel-standalone时，你必须明确告诉浏览器哪些<script>标签包含需要Babel转换的代码。这通过在<script>标签中添加type="text/babel"属性来实现。
示例： 如果你有一个包含JSX的script.js文件，并且希望babel-standalone对其进行处理，正确的引入方式是：
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <!-- 确保在加载babel-standalone之后引入你的脚本 --> <script src="script.js" type="text/babel"></script>
如果缺少type="text/babel"属性，浏览器会尝试将script.js文件作为普通的JavaScript来执行。由于其中包含JSX语法，这将导致解析错误，从而使页面显示空白。
React在版本迭代中对API进行了一些调整，其中最显著的变化之一是根组件的渲染方式。
React 17及更早版本：使用ReactDOM.render()方法将React元素渲染到DOM节点。
// script.js (React 17)
ReactDOM.render(<p>Hi there</p>, document.getElementById("test"));React 18及更新版本：引入了并发模式（Concurrent Mode），并推荐使用ReactDOM.createRoot()方法来创建根节点，然后调用其render()方法。ReactDOM.render()在React 18中仍然可用，但会发出警告，并被视为旧版API。
// script.js (React 18)
const container = document.getElementById("test");
const root = ReactDOM.createRoot(container);
root.render(<p>Hi there</p>);解决方案：根据你引入的React版本（react.development.js和react-dom.development.js的CDN链接），选择相应的渲染API。确保React和ReactDOM的版本一致。
以下是针对不同React版本的完整HTML和JavaScript配置示例。
index.html
<!DOCTYPE html>
<html>
<head>
<title>React 17 示例</title>
<link rel="stylesheet" href="index.css">
<!-- 引入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>
<!-- 引入Babel用于浏览器内JSX转换 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<!-- 引入你的React组件脚本，并指定type="text/babel" -->
<script src="script.js" type="text/babel"></script>
</body>
</html>script.js
// 使用React 17的渲染API
ReactDOM.render(<p>Hello from React 17!</p>, document.getElementById("test"));index.html
<!DOCTYPE html>
<html>
<head>
<title>React 18 示例</title>
<link rel="stylesheet" href="index.css">
<!-- 引入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>
<!-- 引入Babel用于浏览器内JSX转换 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<!-- 引入你的React组件脚本，并指定type="text/babel" -->
<script src="script.js" type="text/babel"></script>
</body>
</html>script.js
// 使用React 18的渲染API
const container = document.getElementById("test");
const root = ReactDOM.createRoot(container);
root.render(<p>Hello from React 18!</p>);开发环境与生产环境：
CORS策略与本地文件访问：
检查浏览器控制台：
CDN版本一致性：
正确地将React JS文件链接到HTML并进行渲染，关键在于理解JSX的转换机制和React API的版本兼容性。通过为包含JSX的脚本添加type="text/babel"属性，可以确保babel-standalone正确地转换代码。同时，根据React版本选择ReactDOM.render或ReactDOM.createRoot是至关重要的。在开发过程中，利用本地服务器和浏览器控制台进行调试，将大大提高问题解决效率。
以上就是React JS入门：Babel配置与渲染问题的深度解析的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
514
收藏
