React项目运行后浏览器白屏问题求助（附代码详情）

第一个脚手架项目问题修正 #

你的index.js缺少必要的导入语句，导致React无法识别<App />组件和React对象，直接引发报错白屏。

修正后的index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

额外排查点 #

• 执行npm install重新安装所有依赖，确保没有缺失的包
• 启动项目后按F12打开浏览器开发者工具，查看Console面板的报错信息，若有模块找不到的提示，检查组件文件路径是否与导入语句匹配

第二个CDN方式项目问题修正 #

1. 升级Babel版本兼容React 17 #

你使用的babel-standalone@6版本过旧，无法适配React 17的JSX语法，替换为7.x版本：
修改index.html中的Babel脚本：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. 确认文件路径正确性 #

确保index.css和index.js与index.html处于同一目录下，若文件位置不同，需调整link和script标签的href/src属性。

3. 确认代码语法正确性 #

index.js代码需保证无语法错误，修正后的代码：

ReactDOM.render(<h1>Hello, everyone!</h1>, document.getElementById("root"));

通用排查步骤 #

所有React白屏问题都优先按以下步骤排查：

• 按F12打开开发者工具，切换到Console面板，查看具体报错信息（比如模块未找到、语法错误、资源加载失败）
• 切换到Network面板，确认所有依赖的JS/CSS资源都已成功加载（状态码为200）

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