React项目环境搭建后文件关联、运行及基础概念困惑求助

先解决你遇到的具体问题 #

1. "render is not a function" 报错 #

React 18版本起，ReactDOM.render()已被废弃，改用createRoot API。正确写法如下：

// src/index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

// 获取HTML中的根节点
const rootElement = document.getElementById('root');
// 创建根实例并渲染组件
const root = createRoot(rootElement);
root.render(<App />);

2. live-server无法加载JS文件 #

create-react-app是基于webpack的模块化项目，不是静态HTML+JS的模式。live-server只能处理静态资源，无法解析React的JSX语法和模块化导入，必须用脚手架内置的开发服务器启动：

npm start

3. 重启VS Code后网页打不开 #

npm start启动的开发服务器是临时进程，关闭终端或重启VS Code后进程会终止。需要重新在项目根目录的终端中运行npm start，才能重新启动服务器并打开网页。

核心概念详解 #

React项目的文件关联逻辑 #

create-react-app通过webpack实现模块打包，文件关联从入口文件开始：

• src/index.js是整个项目的入口，它会导入你的根组件App.js，然后将App组件渲染到public/index.html中的<div id="root"></div>节点上。
• 所有组件、工具函数都通过import/export互相引用，最终webpack会把所有依赖编译成浏览器能识别的JS文件，自动注入到HTML中，无需手动添加script标签。

导入导出规则 #

• 默认导出：每个文件只能有一个默认导出，导入时可自定义名称

  // App.js 导出
  export default function App() {
    return <h1>Hello React</h1>;
  }
  // index.js 导入
  import MyApp from './App'; // 自定义名称MyApp
  

• 命名导出：一个文件可多个命名导出，导入时需用花括号包裹

  // utils.js 导出
  export const formatDate = (date) => new Date(date).toLocaleDateString();
  // App.js 导入
  import { formatDate } from './utils';
  

• 路径规则：同文件夹用./文件名，上级文件夹用../文件名，第三方包直接写包名（如import React from 'react'）

HTML文件的作用 #

public/index.html是项目唯一的入口HTML，核心作用：

• 提供React组件的挂载节点：<div id="root"></div>，所有React代码最终都会渲染到这个节点内。
• 配置网页基础信息：比如标题（<title>）、meta标签、全局样式引用等。
• 无需手动引入JS文件：webpack编译后会自动将打包好的JS/CSS注入到这个HTML中。

public与src文件夹的区别 #

public文件夹

• 存放未编译的静态资源：比如图片、字体、第三方CDN脚本、index.html。
• 这里的文件会原封不动复制到打包后的build文件夹，可通过绝对路径访问（如/logo.png对应public/logo.png）。

src文件夹

• 存放所有业务代码：React组件、JS工具函数、样式文件、自定义hooks等。
• webpack只会处理src内的文件，所有模块化逻辑都在这里实现，是你开发的核心目录。

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