VSC中运行React代码时浏览器页面无法正常加载问题求助

问题原因 #

1. 脚本加载顺序错误 #

你在index.html中将index.js的引入写在了<div id="root">节点之前，代码执行到ReactDOM.render时，页面还未生成root节点，无法找到挂载目标，导致渲染失败。

2. 手动引入了未编译的源码 #

你当前使用的是create-react-app脚手架（从package.json中的react-scripts依赖可判断），脚手架会自动完成JSX编译、代码打包，并将最终的可执行JS文件自动注入到HTML中，不需要你手动引入/src/index.js。你手动引入的是未经编译的源码，浏览器无法直接识别其中的JSX语法和ES模块导入规则，会直接报错。

修复步骤 #

• 打开项目public目录下的index.html，删除你手动添加的<script src="/src/index.js"></script>代码，修改后文件内容参考：

<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

• 进入项目根目录，执行npm start启动开发服务器，不要直接打开本地HTML文件运行，依赖脚手架启动的开发服务器才能正常编译运行React代码。
• 如果启动后仍有异常，可删除项目根目录下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖后再次启动。

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