React CDN引入版本无法渲染组件问题求助

你的代码存在三个关键问题，导致组件无法渲染且无明显报错：

1. JSX未被转译
   包含JSX语法的script标签必须添加type="text/babel"属性，否则Babel standalone不会处理JSX，浏览器无法识别这种语法，会静默失败。

2. DOM元素未加载完成就执行代码
   脚本放在<head>中时，浏览器解析到这段代码时，<body>里的#root元素还没被创建，document.getElementById('root')返回null，React找不到挂载节点自然无法渲染。

3. React 18 API已废弃旧方法
   你使用的是React 18版本，但仍在调用已被废弃的ReactDOM.render，需要改用最新的createRoot API。

以下是修复后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <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>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        class StoryBox extends React.Component {
            render() {
                return( <div>Story Box</div> );
            }
        }

        // 使用React 18的createRoot创建根节点并渲染
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<StoryBox />);
    </script>
</body>
</html>

修复说明：

• 将React代码脚本移到<body>末尾，确保#root元素已被浏览器解析。
• 给script标签添加type="text/babel"，让Babel处理JSX语法。
• 替换ReactDOM.render为createRoot API，适配React 18的渲染逻辑。

内容的提问来源于stack exchange，提问作者Александр Романеев