npx create-react-app创建的React应用无法渲染到屏幕问题求助

你用npx create-react-app搭建的项目本身已经内置了完整的React依赖、构建规则和脚本注入逻辑，手动修改HTML添加冗余CDN、写错组件渲染规则是运行失败的核心原因，具体问题和修复方式如下：

现存问题 #

• 组件命名与渲染规则错误：React要求自定义组件必须首字母大写，小写开头的变量会被识别为原生HTML标签触发报错；同时函数组件不能通过app()直接调用传入ReactDOM.render，必须以JSX标签形式传入。
• HTML配置错误：你手动在head中添加的React CDN、jQuery CDN、写死路径的index.js脚本标签全为冗余内容：
  • CDN引入的React版本和CRA本地安装的React版本会产生冲突
  • 脚本放在head中未加延迟加载属性时，执行时机早于DOM渲染，根本无法找到#root挂载节点
  • CRA构建后会自动生成带hash值的脚本文件并注入HTML，手动写死的index.js路径会直接404
  • 当前测试代码完全不需要jQuery依赖
• API适配问题：当前CRA默认安装React 18版本，旧版ReactDOM.renderAPI已经被废弃，直接调用会抛错。

修复后代码 #

入口JS文件（路径为src/index.js，CRA默认入口文件，不要放在根目录） #

React 18 版本（默认）写法：

import React from "react"
import { createRoot } from "react-dom/client"

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

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

若你使用React 17及更早版本，用以下写法：

import React from "react"
import ReactDOM from "react-dom"

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

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

入口HTML文件（路径为public/index.html） #

删掉所有手动添加的冗余脚本标签，保留基础结构即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <!-- 无需手动添加script标签，CRA构建时会自动注入脚本 -->
</body>
</html>

运行操作 #

改完上述文件后，在项目根目录执行npm start即可正常启动开发服务器、渲染页面。

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