如何搭一个react 项目

创建 React 项目的基础步骤

使用官方工具 create-react-app（CRA）快速初始化项目，需提前安装 Node.js（≥14.0.0）和 npm（≥5.6）。在终端运行以下命令生成新项目：

npx create-react-app my-app
cd my-app
npm start

此命令会生成一个包含基础依赖（如 React、ReactDOM 和基础脚本）的项目结构，并自动启动开发服务器（默认端口 3000）。

项目结构优化

删除不必要的初始文件（如 src/logo.svg 或 src/reportWebVitals.js），保留核心文件 App.js 和 index.js。推荐按功能模块组织代码，例如：

src/
├── components/    # 可复用组件
├── pages/         # 页面级组件
├── utils/         # 工具函数
├── App.js
└── index.js

添加必要依赖

根据需求扩展功能库。例如路由管理使用 react-router-dom，状态管理选择 redux 或 zustand：

npm install react-router-dom zustand

配置开发环境

修改 package.json 添加自定义脚本，如构建分析或代理配置：

"scripts": {
  "analyze": "source-map-explorer build/static/js/*.js"
}

集成样式方案

支持 CSS Modules 或 Sass。安装 Sass 编译器：

npm install sass

创建模块化样式文件 Component.module.scss，避免全局样式冲突。

部署准备

构建生产环境代码并测试本地服务：

npm run build
serve -s build

使用 serve 或其他静态服务器工具验证构建结果。

可选高级配置

如需自定义 Webpack 或 Babel 配置，可执行 npm run eject 暴露配置（不可逆操作）。推荐使用 craco 或 react-app-rewired 覆盖部分配置：

npm install @craco/craco

创建 craco.config.js 文件进行个性化调整，如别名设置或插件添加。

代码规范与质量

集成 ESLint 和 Prettier 保证代码一致性。安装基础配置：

npm install eslint prettier eslint-config-prettier --save-dev

创建 .eslintrc.json 和 .prettierrc 文件定义规则。