本文旨在解决初学者在使用react js时，将javascript文件链接到html并进行渲染时遇到的常见问题。核心内容包括正确配置`type="text/babel"`以启用浏览器内jsx转换，以及理解`reactdom.render`与`reactdom.createroot`在不同react版本间的兼容性差异。文章还将提供完整的代码示例和重要注意事项，帮助开发者顺利搭建基础react开发环境。
在学习React JS初期，开发者常会尝试通过直接引入CDN链接来快速搭建一个实验环境。然而，在这个过程中，可能会遇到JavaScript文件无法正确加载或React组件无法渲染到页面的问题。这通常涉及两个关键点：JSX代码的转换机制和React版本的API兼容性。
1. 理解Babel与JSX转换
React应用通常使用JSX语法来描述UI，这是一种JavaScript的语法扩展。浏览器本身无法直接解析JSX，需要一个转换器将其编译成标准的JavaScript代码。在没有构建工具（如Webpack、Vite）的简单环境中，我们通常会引入babel-standalone库来实现浏览器内的JSX转换。
核心问题：当使用babel-standalone时，你必须明确告诉浏览器哪些<script>标签包含需要Babel转换的代码。这通过在<script>标签中添加type="text/babel"属性来实现。</script>
示例： 如果你有一个包含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语法，这将导致解析错误，从而使页面显示空白。
2. React版本与渲染API兼容性
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的版本一致。
3. 完整的代码示例
以下是针对不同React版本的完整HTML和JavaScript配置示例。
示例一：使用React 17版本
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"));示例二：使用React 18版本
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>);4. 注意事项与最佳实践
-
开发环境与生产环境：
- babel-standalone在浏览器内进行JSX转换，这在开发和学习阶段非常方便。然而，这种方式会增加页面加载和执行时间，不适用于生产环境。
- 在生产环境中，应使用构建工具（如Vite、Create React App、Next.js）预编译你的React代码，将JSX转换为普通JavaScript，并进行代码优化和打包。
-
CORS策略与本地文件访问：
- 如果你直接从文件系统（file:///协议）打开HTML文件，浏览器可能会阻止某些跨域请求（CORS）。babel-standalone在处理外部脚本时，可能会尝试通过XMLHttpRequest（XHR）加载文件，这在file:///协议下可能被阻止，导致net::ERR_FAILED或CORS错误。
- 解决方案：为了避免此类问题，建议使用一个本地Web服务器来运行你的HTML文件。VS Code提供了Live Server等扩展，可以轻松启动一个本地开发服务器。
-
检查浏览器控制台：
- 当遇到问题时，浏览器开发者工具的控制台（Console）是排查问题的首要工具。它会显示JavaScript错误、警告以及网络请求失败等信息。
- 例如，如果看到“You are using the in-browser Babel transformer. Be sure to precompile your scripts for production”这样的警告，这表明babel-standalone正在工作，但提醒你在生产环境中需要预编译。
-
CDN版本一致性：
- 确保引入的react.development.js和react-dom.development.js版本一致。不匹配的版本可能导致运行时错误。
总结
正确地将React JS文件链接到HTML并进行渲染，关键在于理解JSX的转换机制和React API的版本兼容性。通过为包含JSX的脚本添加type="text/babel"属性，可以确保babel-standalone正确地转换代码。同时，根据React版本选择ReactDOM.render或ReactDOM.createRoot是至关重要的。在开发过程中，利用本地服务器和浏览器控制台进行调试，将大大提高问题解决效率。
