如何搭建react项目环境

安装 Node.js 和 npm

确保系统已安装 Node.js（建议版本 16 或更高），因为 React 依赖 npm（Node.js 包管理器）或 yarn 进行依赖管理。可通过以下命令检查版本：

node -v
npm -v

若未安装，从 Node.js 官网 下载并安装。

使用 Create React App 初始化项目

Create React App (CRA) 是官方推荐的脚手架工具，可快速生成 React 项目结构。运行以下命令创建项目：

npx create-react-app my-app

其中 my-app 为项目名称，完成后进入项目目录：

cd my-app

启动开发服务器

在项目根目录下运行以下命令启动开发服务器：

npm start

默认情况下，浏览器会自动打开 http://localhost:3000 并显示欢迎页面。

安装必要依赖

根据项目需求安装额外依赖，例如路由库 react-router-dom：

npm install react-router-dom

或使用 yarn：

yarn add react-router-dom

配置代码编辑器

推荐使用 VS Code 并安装以下插件提升开发体验：

• ESLint：代码语法检查。
• Prettier：代码格式化。
• Reactjs code snippets：快速生成 React 代码片段。

项目结构说明

CRA 生成的标准目录结构如下：

my-app/
├── node_modules/      # 依赖库
├── public/            # 静态资源
├── src/               # 主要代码目录
│   ├── App.js         # 根组件
│   ├── index.js       # 入口文件
├── package.json       # 项目配置和依赖

可选配置

如需覆盖默认配置（如 Webpack），可通过 eject 暴露配置（不可逆）：

npm run eject

或使用第三方工具如 craco 或 react-app-rewired 进行定制。

生产环境构建

运行以下命令生成优化后的生产环境代码：

npm run build

构建结果位于 build/ 目录，可直接部署到服务器。