React项目执行npm start后localhost:3000显示空白页求助

问题描述 #

执行npm start运行React应用，按代码逻辑浏览器访问localhost:3000应显示<h1>GPT-3</h1>，但实际页面为空白。

操作流程 #

• 执行npx create-react-app ./初始化项目
• 执行npm install react-icons安装依赖
• 启动项目后未达到预期效果

环境信息 #

• npm 9.7.2
• Node.js v18.16.1
• Windows 11 22H2
• Chrome 115.0.5790.102
• 启动时出现对应提示

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js #

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

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

App.js #

import React from 'react'

const App = () => {
  return (
    <div>
        <h1>GPT-3</h1>
    </div>
  )
}

export default App

排查解决步骤 #

1. 修复React 18渲染API兼容问题
   结合你的Node.js版本，创建的项目大概率是React 18，但index.js仍使用旧版的ReactDOM.renderAPI。React 18已弃用该写法，需改用createRoot，修改index.js如下：

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

   旧API在React 18中会进入兼容模式，可能导致页面无法正常渲染。

2. 重置依赖并重启项目
   安装react-icons过程中可能损坏依赖缓存，按以下步骤操作：

   • 终止当前运行的npm服务（按下Ctrl+C）
   • 删除项目目录下的node_modules文件夹和package-lock.json文件
   • 重新安装依赖：npm install
   • 重启项目：npm start

3. 查看浏览器控制台报错信息
   打开Chrome开发者工具（快捷键F12），切换到Console标签页，查看是否存在红色报错信息。常见问题包括依赖缺失、语法错误等，报错信息可直接定位问题根源。

4. 验证基础文件正确性
   确认public/index.html中存在<div id="root"></div>容器，src目录下的index.js、App.js文件名和路径无误，组件的导入、导出语法正确。

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