当前位置：首页 > news >正文

（二）React开发环境搭建与目录结构分析（零基础友好）

news 2025/10/22 13:48:50

一、为什么需要专门的开发环境？

上一节课我们知道了React是一个JavaScript库，但它和你之前写的原生JS不同：

原生JS可以直接写在HTML文件里，用浏览器打开就能运行；
React需要"编译"过程（比如把JSX语法转成浏览器能懂的普通JS）；
开发时还需要自动更新、错误提示等工具来提高效率。

所以，我们需要搭建一个专门的React开发环境。好在现在有现成的工具帮我们一键搞定，不用手动配置复杂的编译工具（比如Webpack、Babel），初学者只需跟着步骤操作即可。

二、环境搭建的前提：Node.js必须安装成功

上一节课已经要求大家安装Node.js，这一步是必须的！因为React项目依赖Node.js提供的"包管理工具"（npm）来安装和管理React相关的代码库。

检查Node.js是否安装成功（必做！）

打开终端（命令行工具）：
- Windows：按Win+R，输入cmd，回车（或用PowerShell，更推荐）；
- Mac：打开Launchpad，搜索终端（Terminal）。

输入以下命令，检查版本：

node -v  # 查看Node.js版本
npm -v   # 查看npm版本（npm是Node.js自带的包管理工具）

正常结果：
- 会显示类似v20.10.0（Node版本）和10.2.3（npm版本）的信息；
- 如果提示"不是内部或外部命令"，说明Node.js没安装好，需要重新安装（参考上一节课的安装步骤）。
✅ 注意：Node.js版本建议在14.0.0以上，太低的版本可能不支持最新的React功能。

三、创建React项目：用Create React App一键生成

Create React App（简称CRA）是React官方推出的工具，能帮我们自动生成一个配置好的React项目，包含所有必要的依赖和开发工具，不用我们手动配置任何东西。

步骤1：打开终端，导航到项目存放目录

首先，你要确定把项目放在电脑的哪个位置（比如桌面、文档文件夹）。

终端中用cd命令导航到目标目录：

# 例如：导航到桌面（Windows和Mac通用）
cd 桌面# 如果是Mac，想导航到"文档"文件夹
cd ~/Documents# 不知道当前在哪个目录？输入以下命令查看
pwd  # Windows PowerShell和Mac通用，显示当前路径

步骤2：执行创建项目的命令

在终端中输入以下命令（注意：项目名称只能用小写字母、数字和连字符-）：

npx create-react-app my-first-react-app

命令解释：

npx：是npm 5.2+自带的工具，用于临时下载并运行某个包（这里就是create-react-app），不用全局安装，非常方便；
create-react-app：就是我们要使用的工具名称；
my-first-react-app：是你的项目名称，你可以改成自己喜欢的（比如react-study）。

步骤3：等待安装完成（关键！）

执行命令后，终端会开始自动下载依赖，过程可能需要2-5分钟（取决于网络速度）。

你会看到终端不断滚动文字，最后出现类似以下内容，说明安装成功：

Success! Created my-first-react-app at /Users/你的用户名/桌面/my-first-react-app
Inside that directory, you can run several commands:npm startStarts the development server.npm run buildBundles the app into static files for production.npm testStarts the test runner.npm run ejectRemoves this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd my-first-react-appnpm start

❌ 如果安装失败（比如网络错误）：

检查网络是否正常；

可以尝试用国内镜像加速，重新执行命令：

npx create-react-app my-first-react-app --registry=https://registry.npm.taobao.org

四、启动React项目：第一次运行你的React程序

项目创建成功后，我们需要进入项目目录并启动开发服务器。

步骤1：进入项目目录

在终端中输入：

cd my-first-react-app  # 项目名称要和你创建时的一致

步骤2：启动开发服务器

输入以下命令：

npm start

命令执行后，会发生两件事：

终端会显示启动信息，最后出现Compiled successfully!；
浏览器会自动打开一个页面，地址是http://localhost:3000。

看到这个页面，说明成功了！

浏览器页面会显示：

一个旋转的React图标；
文字"Learn React"；
下面还有一些命令提示。

✅ 开发服务器的特点：

当你修改代码并保存后，浏览器会自动刷新，不用手动按F5；
如果代码有错误，错误信息会显示在浏览器和终端中，方便排查。

五、项目目录结构解析：每个文件是干什么的？

用VS Code打开项目（文件→打开文件夹→选择my-first-react-app），左侧会显示项目的目录结构。我们只需要关注核心文件，其他文件暂时不用管。

my-first-react-app/
├── node_modules/        # 项目依赖（React等库都在这里）
├── public/              # 静态资源文件夹
│   ├── index.html       # 整个应用的入口HTML文件
│   ├── favicon.ico      # 浏览器标签页的图标
│   └── ...（其他静态文件）
├── src/                 # 源代码文件夹（我们主要在这里写代码）
│   ├── index.js         # 入口JavaScript文件（程序从这里开始运行）
│   ├── App.js           # 根组件（页面的主要内容）
│   ├── index.css        # 全局样式
│   ├── App.css          # App组件的样式
│   ├── logo.svg         # React的图标（可删除）
│   └── ...（其他示例文件）
├── package.json         # 项目配置文件（依赖列表、命令等）
└── ...（其他配置文件）

核心文件详解：

node_modules/
存放所有项目依赖的代码（比如React库本身）。这个文件夹很大，永远不要手动修改里面的内容，也不用提交到代码仓库（因为可以通过package.json重新安装）。
public/index.html
整个应用唯一的HTML文件（单页应用的特点）。React会把组件渲染到这个文件的<div id="root"></div>中。
简单看一下内容：
```
<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div>  
</body>
```

src/index.js
JavaScript入口文件，作用是把React组件挂载到HTML的root元素上。
核心代码（简化后）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';  // 导入App组件// 找到HTML中的root元素
const root = ReactDOM.createRoot(document.getElementById('root'));
// 把App组件渲染到root里
root.render(<React.StrictMode><App />  {/* 这里的<App />就是我们的根组件 */}</React.StrictMode>
);

src/App.js
根组件，里面包含了页面的主要内容。默认代码是：

import './App.css';function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}export default App;  // 导出App组件，供index.js使用

package.json
项目的"身份证"，记录了项目名称、依赖库、可用命令等。其中scripts部分定义了常用命令：

"scripts": {"start": "react-scripts start",  // 启动开发服务器（就是我们刚才用的npm start）"build": "react-scripts build",  // 打包项目（用于上线）"test": "react-scripts test",    // 运行测试"eject": "react-scripts eject"   // 暴露配置文件（谨慎使用，不可逆）
}

六、修改第一个React组件：体验实时更新

让我们修改App.js，体验一下React的开发流程：

在VS Code中打开src/App.js；

删除默认代码，替换成以下内容：

// 导入样式（暂时保留，后面可以自己改）
import './App.css';// 定义App组件
function App() {// 返回要显示的内容（JSX语法，后面会详细讲）return (<div><h1>我的第一个React应用</h1><p>这是我用Create React App创建的项目！</p></div>);
}// 导出组件
export default App;

保存文件（Ctrl+S或Cmd+S）。

此时，浏览器会自动刷新，页面会显示你修改后的内容：

大标题"我的第一个React应用"；
段落"这是我用Create React App创建的项目！"。

✅ 恭喜！你已经成功修改了第一个React组件。

七、停止开发服务器：如何正确关闭项目

当你需要暂停开发时，不要直接关闭终端，正确的做法是：

回到终端窗口；
按Ctrl+C（Windows和Mac通用）；
终端会提示Terminate batch job (Y/N)?，输入Y并回车，服务器就会停止。

下次想继续开发时，进入项目目录，重新执行npm start即可。

八、常见问题与解决办法

启动项目时提示端口被占用
错误信息：Something is already running on port 3000
解决：终端会问你Would you like to run the app on another port instead? (Y/n)，输入Y，会自动使用其他端口（比如3001）。
修改代码后浏览器没更新
解决：检查是否保存了文件（一定要保存！）；如果还是不行，关闭终端，重新执行npm start。
删除了某个文件后报错
解决：如果是不小心删除了src里的文件，可以重新创建一个同名文件；或者直接删除整个项目，重新用CRA创建（初学者最快的方式）。