React服务器显示空白页，编写HelloWorld代码仍无法正常显示

用户提供的代码 #

App.js #

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}
export default App;

Index.js #

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

排查与解决方法 #

• 确认public/index.html的root元素存在
  打开public/index.html，确保里面有<div id="root"></div>这个元素。React需要把组件挂载到这个元素上，没有的话页面自然空白。

• 适配React 18+版本的渲染方式
  如果你用的是React 18或更高版本，ReactDOM.render已经不再推荐使用，改用createRoot才能正常渲染：
  修改Index.js代码如下：

  import React from "react";
  import { createRoot } from "react-dom/client";
  import App from "./App";
  import "./index.css";
  
  const root = createRoot(document.getElementById("root"));
  root.render(<App />);
  

• 清除缓存并重启服务
  按Ctrl+C停止当前服务器，删除node_modules、package-lock.json（或yarn.lock），然后重新执行npm install和npm start。依赖或编译缓存出问题也会导致页面无法正常显示。

• 查看浏览器控制台错误
  按F12打开开发者工具，切换到Console标签页，看有没有语法错误、路径错误之类的提示，这些都会导致组件渲染失败。

• 排查index.css的样式冲突
  暂时注释掉Index.js里的import "./index.css"，再刷新页面。如果能显示Hello World，说明是css里的全局样式把内容隐藏了，检查css文件里的代码。

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