React.js组件无法在HTML网页中渲染的问题排查求助

问题描述 #

尝试将React集成到网站中，添加简单测试元素但无法显示，控制台无报错。测试环境包括本地服务器、Chrome直接打开文件、VS Code的Edge预览器，均无效。

用户代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css">

        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    </head>
    <body>
        <h1>My Website</h1>

        <div id="react-container"></div>

        <script type="text/babel">
            import React from 'react';
            import ReactDOM from 'react-dom';

            const element = <h1>Hello World</h1>


            ReactDOM.render(element, document.getElementById("react-container"));
        </script>
    </body>
</html>

问题原因及修复方案 #

1. 缺少Babel转译器 #

使用type="text/babel"的script标签需要Babel转译JSX语法，当前代码未引入Babel的CDN，导致JSX代码无法被解析执行。

修复：在React相关脚本之后添加Babel的CDN：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. 错误使用import语句 #

通过CDN引入的React是UMD版本，React和ReactDOM会作为全局变量挂载到window对象上，不需要使用import语句导入，否则会导致未捕获错误（因Babel未加载未显示报错）。

修复：删除import React from 'react';和import ReactDOM from 'react-dom';两行代码。

3. React 18的API更新 #

React 18推荐使用createRootAPI替代旧的ReactDOM.render，旧API虽兼容，但新API更规范。

修复：替换渲染逻辑为：

const root = ReactDOM.createRoot(document.getElementById("react-container"));
root.render(element);

完整修正后的代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css">

        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <!-- 添加Babel转译器 -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <h1>My Website</h1>

        <div id="react-container"></div>

        <script type="text/babel">
            const element = <h1>Hello World</h1>;

            // 使用React 18的createRoot API
            const root = ReactDOM.createRoot(document.getElementById("react-container"));
            root.render(element);
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Samuel Crawford