如何搭建react框架

安装 Node.js 和 npm

确保系统已安装 Node.js（包含 npm）。可通过官网下载安装包或使用版本管理工具（如 nvm）。安装完成后，运行以下命令验证版本：

node -v
npm -v

使用 Create React App 初始化项目

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

npx create-react-app my-app
cd my-app

my-app 为项目名称，可根据需求修改。

启动开发服务器

进入项目目录后，运行以下命令启动开发服务器：

npm start

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

项目结构说明

生成的项目主要包含以下目录和文件：

• src/：源代码目录，包含入口文件 index.js 和组件文件 App.js。
• public/：静态资源目录，包含 index.html 模板。
• package.json：项目依赖和脚本配置。

安装必要依赖

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

npm install react-router-dom

自定义配置（可选）

如需修改默认配置（如 Webpack 或 Babel），可通过以下方式：

1. 弹出配置：运行 npm run eject 暴露所有配置文件（不可逆）。
2. 第三方工具：使用 react-app-rewired 或 craco 覆盖配置。

构建生产环境代码

完成开发后，运行以下命令生成优化后的生产代码：

npm run build

构建结果会保存在 build/ 目录中，可直接部署到服务器。

常见问题处理

• 端口冲突：修改启动端口，例如 PORT=4000 npm start。
• 依赖安装失败：尝试删除 node_modules/ 和 package-lock.json 后重新运行 npm install。