使用CDN引入React 18后页面无法渲染，请求排查问题

你的问题核心在于React 18 已废弃 ReactDOM.render 方法，必须使用新的根API才能正常渲染。以下是具体修复步骤：

1. 修改index.js代码 #

将原来的ReactDOM.render调用替换为React 18的createRootAPI：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello</h1>);

2. 排查其他潜在问题 #

• 确认index.js文件与index.html在同一目录下，路径引用无误
• 打开浏览器开发者工具（F12）查看控制台，若有其他报错（如文件加载失败、JSX转译问题），针对性处理：
  • 若遇到JSX转译异常，可将babel-standalone版本升级到较新的稳定版（比如@7.x），替换原有script标签：

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

  • 检查CDN资源是否加载成功，可在开发者工具的Network标签下查看请求状态

修复后的完整代码示例 #

index.html #

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <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@7/babel.min.js"></script>
      
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

index.js #

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello</h1>);

内容的提问来源于stack exchange，提问作者Sicko-Code