React入门问题：ReactDOM.render()页面无内容显示，求解决方法

问题出在你用了React 18版本，但代码还是沿用了旧的渲染API。React 18已经废弃了ReactDOM.render()，改用新的根渲染方式，这就是页面空白的原因。

修正步骤： #

• 先获取页面上的根容器#root
• 用ReactDOM.createRoot()创建根实例
• 调用根实例的render()方法来渲染内容

另外注意：你的script标签同时设置了src="../REACT/app.js"和内嵌代码，浏览器会优先加载src指定的外部文件，内嵌代码会被忽略。要么把代码移到app.js里，要么去掉src属性。

修正后的完整代码： #

<!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>react</title>
    <link rel="stylesheet" href="../REACT/style.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@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(<h1>Hello, everyone!</h1>);
    </script>
</body>
</html>

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