如何在现有HTML中正确集成React 18？

问题分析 #

你的代码存在三个核心问题：

• 错误使用 ES 模块导入：通过 CDN 全局引入 React 时，无需使用 import 语句，应直接调用全局变量 ReactDOM.createRoot。
• 未配置 Babel 编译 JSX：引入的 JS 文件未声明 type="text/babel"，导致浏览器无法识别 JSX 语法。
• 不必要的 DOM 覆盖：document.body.innerHTML = '<div id="app"></div>' 会清空原有页面内容，而你的 HTML 中已经存在 #app 容器，完全不需要这一步。

修正后的代码 #

HTML 文件 #

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <p>Hi</p>
    <div id="app"></div>
    <!-- 添加 type="text/babel" 让 Babel 编译 JSX 语法 -->
    <script src="./todo.js" type="text/babel"></script>
</body>
</html>

JS 文件（todo.js） #

const myArr = [
    {
        Heading: "lorembdbfyhfhjvjvj",
        Body: "hdhdgbfb"
    },
    {
        Heading: "lorembdbfyhfhjvjvj",
        Body: "hdhdgbfb"
    },
    {
        Heading: "lorembdbfyhfhjvjvj",
        Body: "hdhdgbfb"
    }
]

const Reuse = (props) => {
    return (
        <div>
            <h3>{props.Heading}</h3>
            <p>{props.Body}</p>
        </div>
    )
}

const MyDisplay = () => {
    const sense = myArr.map((v, index) => {
        // 循环渲染组件必须添加唯一 key 属性，避免 React 控制台警告
        return <Reuse key={index} Heading={v.Heading} Body={v.Body} />
    })
    return (
        <div>
            {sense}
        </div>
    )
}

// 直接使用全局的 ReactDOM.createRoot 方法
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<MyDisplay />);

额外优化说明 #

• 给循环渲染的组件添加 key 属性，这是 React 列表渲染的强制要求，能避免控制台警告并提升渲染性能。
• 给标题和内容添加 <h3>、<p> 等语义化标签，让页面结构更清晰。

内容的提问来源于stack exchange，提问作者Zero Hour