React入门运行Hello World失败求助：配置与代码问题排查

我刚开始学习React，尝试在页面输出“Hello World”却一直不成功，查阅了大量视频和解决方案仍未解决。

HTML代码：

<!DOCTYPE html>
<html>
<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">
    <title>Test</title>
</head>
<body>
    <script type="text/babel" src="index.js"></script>    <!-- 改为type="module"也无效 -->
</body>
</html>

JS代码：

import React from "react";

function Message() {
  return <h1>Hello world</h1>;
}

export default Message;

我已在package.json的"version": "0.1.0"下方添加了"type": "module"，但问题依旧。文件结构为：根目录包含node_modules、public、src文件夹，以及package.json、package-lock.json；public目录下是上述HTML文件，src目录下是上述JS文件。

问题原因及解决方法 #

你的代码存在几个核心问题，对应解决步骤如下：

1. 缺少挂载容器与渲染逻辑
   React组件需要挂载到页面的DOM元素上，且需要通过ReactDOM完成渲染操作。你的HTML里没有挂载容器，JS里也没有渲染代码。

2. 依赖引入与编译问题
   直接用本地文件引入的方式，需要确保React、ReactDOM的依赖正确引入，且JSX语法能被编译。

快速修复方案（CDN方式）

修改public/index.html：

<!DOCTYPE html>
<html>
<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">
    <title>Test</title>
    <!-- 引入React、ReactDOM及Babel编译工具 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <!-- 添加React挂载容器 -->
    <div id="root"></div>
    <!-- 修正JS文件路径 -->
    <script type="text/babel" src="../src/index.js"></script>
</body>
</html>

修改src/index.js：

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

function Message() {
  return <h1>Hello world</h1>;
}

// 将组件渲染到挂载容器
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Message />);

推荐方案（官方脚手架流程）

如果你的项目是通过npx create-react-app创建的，不要直接打开HTML文件，执行以下命令启动开发服务器：

npm start

项目会自动在浏览器中打开，默认的src/index.js已包含完整的渲染逻辑，你只需替换组件内容即可。同时确保package.json的scripts字段包含"start": "react-scripts start"。

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