深入理解React JS：在HTML中正确加载和渲染JSX组件

胖静小哥_3109

发布时间：2025-12-02 12:00:09

486人浏览过

来源于php中文网

原创

深入理解React JS：在HTML中正确加载和渲染JSX组件

本文详细阐述了在学习react js时，如何解决javascript文件无法在html中正确加载并渲染react组件的问题。核心内容包括理解jsx在浏览器中运行所需的babel转译机制，以及如何根据react版本（17或18）选择正确的reactdom api。文章将指导读者正确配置html脚本标签、处理常见的cors错误，并提供示例代码，确保react应用能够顺利运行。

引言

对于初学React JS的开发者而言，直接在HTML文件中引入React库并通过浏览器运行JSX代码是一种常见的学习方式。然而，在这个过程中，经常会遇到JavaScript文件无法加载、页面空白或控制台报错等问题。这些问题通常源于对JSX转译机制和React不同版本API的误解。本教程旨在提供一套清晰的解决方案，帮助开发者顺利地在浏览器环境中运行React应用。

核心问题分析

当您尝试在HTML文件中直接运行包含JSX语法的JavaScript代码时，可能会遇到以下两个主要障碍：

JSX转译： 浏览器本身不直接支持JSX语法。JSX需要被Babel等工具转译成普通的JavaScript函数调用（如React.createElement()）后才能被浏览器解析执行。在开发环境中，通常会使用构建工具（如Webpack、Vite）配合Babel进行预编译。但如果直接在浏览器中引入，则需要babel-standalone库在运行时进行转译。
React版本API兼容性： React 17和React 18在渲染组件的API上存在显著差异。如果不匹配相应的API，将导致渲染失败。

解决方案

为了确保您的React JS文件能够正确加载并渲染，请遵循以下步骤：

1. 引入必要的React库和Babel

在HTML文件的

或标签内，需要按顺序引入React、ReactDOM和babel-standalone的CDN链接。

立即学习“前端免费学习笔记（深入）”；

React: 核心库，包含React组件的定义。
ReactDOM: 用于将React组件渲染到DOM中。
Babel Standalone: 在浏览器中实时转译JSX代码。

示例 HTML 结构：

<!DOCTYPE html>
<html>
<head>
    <title>React JS 教程</title>
    <link rel="stylesheet" href="index.css"> <!-- 样式文件，可选 -->
    <!-- 引入 React 核心库和 ReactDOM -->
    <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 Standalone 用于浏览器内JSX转译 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div> <!-- React 应用的挂载点 -->
    <!-- 您的本地 React JS 脚本 -->
    <script src="script.js" type="text/babel"></script>
</body>
</html>

注意事项：

crossorigin属性对于CDN加载的React库是推荐的，有助于错误报告。
babel-standalone必须在您的本地React脚本之前引入。
将React应用的挂载点（如
）放置在中。

2. 正确配置本地JavaScript脚本标签

这是最关键的一步。您的本地JavaScript文件（例如script.js）如果包含JSX语法，其<script>标签必须明确指定type="text/babel"。这个属性告诉浏览器，该脚本需要由之前引入的babel-standalone进行处理。</script>

<script src="script.js" type="text/babel"></script>

如果缺少type="text/babel"，浏览器将尝试将JSX作为普通JavaScript解析，从而导致语法错误和页面空白。

3. 编写兼容React版本的JSX代码

React 17和React 18在组件渲染方式上有所不同。请根据您引入的React版本选择正确的API。

a. React 17 及更早版本：使用 ReactDOM.render()

JS X Monitor

X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。

下载

如果您引入的是React 17或更早版本（例如react@17/umd/react.development.js），则应使用ReactDOM.render()方法。

示例 script.js (适用于 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>

ReactDOM.render(
    <p>你好，React 17!</p>,
    document.getElementById("root")
);

b. React 18 及更高版本：使用 ReactDOM.createRoot()

React 18引入了新的根API ReactDOM.createRoot()，以支持并发渲染等新特性。如果您引入的是React 18（例如react@18/umd/react.development.js），则必须使用此新API。

示例 script.js (适用于 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>

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement); // 创建根

root.render(
    <p>你好，React 18!</p> // 渲染组件
);

如果您在React 18环境中使用ReactDOM.render()，控制台会显示警告或错误信息，提示您使用createRoot。

常见问题与注意事项

CORS 策略错误 (Access to XMLHttpRequest ... blocked by CORS policy)： 当您直接通过浏览器打开本地文件系统中的HTML文件（例如file:///D:/Ventures/React%20tutorial/index.html）时，babel-standalone在尝试加载script.js进行转译时，可能会因为浏览器的安全策略（CORS）而失败。 解决方案： 避免直接打开file://路径。请使用一个本地开发服务器来提供您的HTML文件。VS Code用户可以安装“Live Server”扩展，右键点击HTML文件选择“Open with Live Server”，它会在http://127.0.0.1:5500/这样的地址启动一个本地服务器，从而避免CORS问题。
Babel 警告 (You are using the in-browser Babel transformer...)： 当您使用babel-standalone时，控制台可能会出现此警告。这表明您正在浏览器中实时进行代码转译，这在生产环境中效率低下且可能影响性能。 建议： 在实际项目开发中，应使用构建工具（如Create React App、Vite、Next.js等）进行预编译，将JSX在部署前就转译为普通JavaScript。babel-standalone主要适用于学习和快速原型开发。
文件路径确认： 确保您的script.js文件与HTML文件位于同一目录下，或者在src属性中提供了正确的相对或绝对路径。
调试技巧：
- 始终打开浏览器的开发者工具（F12），检查“Console”选项卡是否有错误信息。
- 检查“Network”选项卡，确保所有JavaScript文件（包括React、ReactDOM、Babel和您的script.js）都已成功加载，且状态码为200。如果script.js的类型显示为xhr而不是script，这通常是CORS错误的表现。

总结

在HTML中直接加载和渲染React JSX组件，需要特别注意Babel的转译机制和React版本对应的渲染API。通过正确引入babel-standalone并为本地脚本设置type="text/babel"，以及根据React 17或React 18选择ReactDOM.render()或ReactDOM.createRoot()，您可以有效地解决常见的加载问题。同时，建议在本地开发时使用HTTP服务器，以规避CORS错误，并为未来的生产环境开发打下基础。

Safari浏览器网页排版错乱和样式丢失该怎么修复

VSCode怎么修改弹窗与通知样式实现界面美化

如何阻止 dialog.showModal() 触发页面滚动到顶部

Golang中Gin框架对前端静态页面优雅托管

怎么通过CSS设置毛玻璃背景的动态模糊过渡？

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

4616

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

1395

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

1818

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

10183

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

1000

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

2904

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

1609

2023.09.14