React JS入门：Babel配置与渲染问题的深度解析_技术教程

本文旨在解决初学者在使用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时，你必须明确告诉浏览器哪些标签中添加type="text/babel"属性来实现。

示例：如果你有一个包含JSX的script.js文件，并且希望babel-standalone对其进行处理，正确的引入方式是：

如果缺少type="text/babel"属性，浏览器会尝试将script.js文件作为普通的JavaScript来执行。由于其中包含JSX语法，这将导致解析错误，从而使页面显示空白。

2. React版本与渲染API兼容性

React在版本迭代中对API进行了一些调整，其中最显著的变化之一是根组件的渲染方式。

React 17及更早版本：使用ReactDOM.render()方法将React元素渲染到DOM节点。
```
// script.js (React 17)
ReactDOM.render(Hi there
, 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(Hi there
);
```

解决方案：根据你引入的React版本（react.development.js和react-dom.development.js的CDN链接），选择相应的渲染API。确保React和ReactDOM的版本一致。

3. 完整的代码示例

以下是针对不同React版本的完整HTML和JavaScript配置示例。

示例一：使用React 17版本

index.html




    React 17 示例

script.js

// 使用React 17的渲染API
ReactDOM.render(Hello from React 17!
, document.getElementById("test"));

示例二：使用React 18版本

index.html




    React 18 示例

script.js

// 使用React 18的渲染API
const container = document.getElementById("test");
const root = ReactDOM.createRoot(container);
root.render(Hello from React 18!
);

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是至关重要的。在开发过程中，利用本地服务器和浏览器控制台进行调试，将大大提高问题解决效率。