create-react-app搭建的React项目访问localhost仅显示源码不渲染如何修复

问题根因 #

你当前的Express服务直接返回了React项目的未编译源代码文件，浏览器识别为普通文本文件，不会作为前端应用执行渲染。

修复步骤 #

1. 先修正React入口代码的语法错误
   你的index.js存在两处明显错误，先调整：

// 原导入语法错误，拆分导入语句，注意ReactDOM的导入包名
import React from "react";
import ReactDOM from "react-dom/client";
// 注意components拼写错误，路径不需要以/开头
import App from "./components/App.js";

// React 18+ 渲染写法，如果你用的是旧版本可以保留原来的render写法
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

2. 构建React静态资源
   create-react-app项目不能直接部署源代码，需要先执行构建命令生成可部署的产物：

npm run build

执行完成后项目根目录会生成build文件夹，里面包含编译打包后的HTML、JS、CSS等所有静态资源。
3. 重写Express服务代码
修改server.js，改为托管build目录的静态资源，而非返回源代码：

const express = require('express');
const path = require('path');
const app = express();

// 托管build目录下的所有静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 适配前端单页路由，所有请求统一返回入口HTML
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log("app listening on port 3000");
});

4. 调整路径匹配你本地的项目结构，保证build文件夹和server.js的相对路径和代码里的path拼接逻辑一致，启动服务后即可正常访问。

补充说明 #

如果是开发阶段调试，不需要自行搭建Express服务，直接执行npm start使用create-react-app自带的开发服务器即可，自行搭建Express服务一般用于生产环境部署。

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