使用npx create-react-app创建的React项目npm start无报错但页面空白求助

你的代码存在三处关键错误，修正后即可正常显示"Hello"：

1. 修正index.js的React导入 #

JSX语法要求作用域内必须存在大写的React，你当前导入的是小写react，会导致JSX无法正常编译：

// 错误写法
import react from 'react'
// 正确写法
import React from 'react'

2. 修正index.js的ReactDOM导入与渲染逻辑 #

ReactDOM是默认导出而非命名导出，且React 18及以后推荐使用createRoot方式渲染（旧版本可沿用ReactDOM.render但需修正导入路径）：

React 18+ 推荐写法 #

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

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

React 17及以下写法 #

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

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

3. 修正App.js的组件命名 #

React约定组件名必须以大写字母开头，小写的app会被识别为普通HTML标签，而非React组件：

// 错误写法
const app = () => { ... }
export default app
// 正确写法
const App = () => {
  return (
    <div className='App'>
        <h1>Hello</h1>
    </div>
  )
}
export default App

完成以上修正后，重启npm start，页面就能正常显示"Hello"了。

内容的提问来源于stack exchange，提问作者Md. Sakibullah 191-15-12187