深入理解React JS：在HTML中正确加载和渲染JSX组件-html教程-PHP中文网

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

霞舞

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

原创

432人浏览过

深入理解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文件的<head>或<body>标签内，需要按顺序引入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应用的挂载点（如<div id="root"></div>）放置在<body>中。

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

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

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

登录后复制

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

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

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

腾讯Effidit

腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验

查看详情

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

如果您引入的是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错误，并为未来的生产环境开发打下基础。

以上就是深入理解React JS：在HTML中正确加载和渲染JSX组件的详细内容，更多请关注php中文网其它相关文章！