React基础代码无法渲染，create-react-app默认示例正常，求排查解决

1. ReactDOM 导入方式错误 #

你的代码里用了命名导入import { ReactDOM } from "react-dom";，但ReactDOM是默认导出，正确的导入方式分两种：

• React 17及以下版本：import ReactDOM from "react-dom";
• React 18及以上版本：import ReactDOM from "react-dom/client";

2. React 18 已废弃 ReactDOM.render 方法 #

当前主流的React版本是18+，该版本不再支持旧的ReactDOM.render写法，必须使用createRoot API：
修正后的完整代码：

import React from "react";
import ReactDOM from "react-dom/client";

const element = <div>Hello World!</div>;
// 获取页面中的root容器
const rootElement = document.getElementById('root');
// 创建根节点并渲染内容
const root = ReactDOM.createRoot(rootElement);
root.render(element);

3. 确认页面存在 id="root" 的DOM容器 #

检查项目的public/index.html文件，确保里面有用于挂载React应用的容器节点：

<div id="root"></div>

create-react-app生成的项目默认包含这个元素，如果你是手动搭建的项目，很可能遗漏了这一步。

4. 确保react与react-dom版本匹配 #

执行以下命令查看依赖版本：

npm list react react-dom

如果两个包版本不一致，重新安装匹配的最新版本：

npm install react@latest react-dom@latest

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