React+Node项目无法渲染Hello World，请求技术协助

核心问题 #

当前项目存在三个关键问题导致React代码未执行：

1. 浏览器无法直接解析JSX语法，且未配置编译工具
2. 使用了React 18已废弃的ReactDOM.render API
3. 脚本加载配置错误，且资源路径未匹配Express静态目录规则

解决方案 #

推荐方案：使用React官方脚手架快速搭建 #

直接借助create-react-app规避手动配置的繁琐：

npx create-react-app hello-world
cd hello-world
npm start

启动后修改src/App.js为：

function App() {
  return <p>hello world</p>;
}
export default App;

如需配合Express服务，可在项目根目录新建server.js并调整启动脚本。

手动修复现有项目配置 #

若要保留现有结构，按以下步骤修改：

1. 更新React 18渲染代码
   修改index.js为React 18兼容写法：

import React from "react";
import ReactDOM from "react-dom/client";

// 创建根节点并渲染
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<p>hello world</p>);

2. 配置Babel编译JSX与ES模块

• 安装Babel预设：

npm install @babel/preset-react @babel/preset-env --save-dev

• 项目根目录新建.babelrc文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

• 在package.json的scripts中添加编译命令：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node server.js",
  "build": "babel index.js --out-file public/index.js"
}

3. 修正HTML脚本标签
   修改index.html中的script标签，移除无效的type="text/jsx"：

<script src="index.js" defer></script>

4. 执行编译并启动服务
   先编译React代码到静态资源目录：

npm run build

再启动Express服务：

npm start

5. 目录结构验证
   确保项目目录结构符合要求：

项目根目录/
├── public/
│   ├── index.js（编译后文件）
│   └── styles.css
├── index.js（源文件）
├── index.html
├── server.js
├── package.json
└── .babelrc

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