如何搭建 react 项目

使用 Create React App 搭建项目

Create React App (CRA) 是官方推荐的快速搭建 React 项目的工具，无需配置构建工具链。

安装最新版本的 Node.js 和 npm 或 yarn
运行命令 npx create-react-app my-app（将 my-app 替换为项目名称）
等待依赖安装完成后，进入项目目录 cd my-app
启动开发服务器 npm start 或 yarn start

手动配置 Webpack 项目

适合需要自定义构建配置的高级用户。

初始化项目 npm init -y 生成 package.json
安装 React 核心库 npm install react react-dom
安装 Webpack 和 Babel npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
创建 webpack.config.js 配置文件并设置入口、输出和 loader 规则
配置 Babel 预设文件 .babelrc 包含 @babel/preset-env 和 @babel/preset-react

使用 Vite 创建项目

Vite 提供更快的开发服务器启动和热更新体验。

运行命令 npm create vite@latest my-react-app --template react
进入项目目录 cd my-react-app
安装依赖 npm install
启动开发服务器 npm run dev

项目结构优化

创建清晰的目录结构有助于长期维护：
src/components/ 存放可复用组件
src/pages/ 存放页面级组件
src/assets/ 存放静态资源
src/utils/ 存放工具函数
src/styles/ 存放全局样式文件

添加必要依赖

常用扩展库可增强项目功能：
路由管理 npm install react-router-dom
状态管理 npm install @reduxjs/toolkit react-redux
HTTP 客户端 npm install axios
样式处理 npm install styled-components 或 npm install sass

配置代码规范

保证代码质量的一致性：
安装 ESLint npm install eslint --save-dev
初始化配置 npx eslint --init
添加 Prettier npm install prettier eslint-config-prettier --save-dev
创建 .prettierrc 配置文件
设置 Git 钩子工具 npm install husky lint-staged --save-dev

生产环境构建

生成优化后的生产版本：
CRA 项目运行 npm run build
Webpack 项目配置 mode: 'production'
Vite 项目运行 npm run build
构建输出默认位于 build/ 或 dist/ 目录

每种方法适用于不同场景，CRA 适合快速开始新项目，手动配置适合需要高度定制化的场景，Vite 则提供更现代的开发体验。根据项目需求和团队偏好选择合适的搭建方式。