React项目仅显示‘App’字样空白页面问题求助

我是网页设计与编程新手，正在跟随React教程学习。使用create-react-app ./初始化项目后删除了src文件夹，自行编写了App.js和index.js代码。之前运行时页面完全空白，现在页面左上角仅显示‘App’字样，无法渲染预期的‘testingoutput’标题。已安装react-icons依赖，不确定是否缺少必要配置，相关代码如下：

我的代码 #

App.js #

import React from 'react';

const App = () => {
  return (
    <div>
        <h1>testingoutput</h1>
    </div>
  )
}

export default App;

index.js #

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

import App from './App';

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

当前问题 #

页面左上角仅显示“App”文字，无法正常渲染<h1>标签内的“testingoutput”标题。

解决步骤 #

1. 检查public/index.html的挂载节点
   确认项目public文件夹下的index.html中存在<div id="root"></div>元素，React需要通过这个节点挂载应用。如果该节点缺失，手动添加到<body>标签内。

2. 适配React 18的渲染方式
   若你使用的是React 18及以上版本，旧的ReactDOM.render写法已被废弃，会导致渲染异常。修改index.js为：

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

3. 验证依赖完整性
   执行以下命令检查react和react-dom是否正常安装：

   npm list react react-dom
   

   若显示未安装，运行npm install react react-dom补装依赖。

4. 清除缓存重启项目
   停止当前运行的项目，执行：

   npm start -- --reset-cache
   

   重新启动项目后查看效果。

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