使用CDN与Babel时，无法将React元素渲染至div元素的问题

先给你能直接跑通的完整代码，再拆解可能踩的坑：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>React Hello World</title>
</head>
<body>
    <div id="root"></div>

    <!-- 严格按顺序引入CDN：React → ReactDOM → Babel -->
    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- 业务代码需指定type为text/babel -->
    <script type="text/babel">
        // React 18+ 必须用createRoot替代旧的ReactDOM.render方法
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<h1>Hello world</h1>);
    </script>
</body>
</html>

常见问题排查点 #

• API版本变更：如果用的是React 18及以上的CDN，ReactDOM.render()已经被废弃，必须改用createRoot API，这是最容易踩的坑。
• CDN引入顺序错误：必须保证React在前、ReactDOM居中、Babel最后，否则会出现"变量未定义"的报错。
• DOM加载顺序问题：id="root"的容器必须放在业务script标签前面，不然JS执行时找不到目标DOM元素。
• Babel引用错误：别用旧版的babel-core CDN，现在要引用@babel/standalone才能正确转译JSX语法。

如果还是不行，打开浏览器控制台（F12）看具体报错信息，比如"React is not defined"或"createRoot is not a function"，根据提示直接定位问题即可。

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