React18+ 项目搭建-从初始化、技术选型到开发部署的全流程规划

最新推荐文章于 2025-04-25 22:31:31 发布

程序猿--豪

最新推荐文章于 2025-04-25 22:31:31 发布

阅读量934

点赞数 23

文章标签： react.js

本文链接：https://blog.csdn.net/weixin_52630341/article/details/147422833

版权

搭建一个 React 项目需要从项目初始化、技术选型到开发部署的全流程规划。以下是详细步骤和推荐的技术栈：

一、项目初始化

1. 选择脚手架工具

推荐工具：
- Vite（现代轻量级工具，支持 React 模板，速度快）：
```
npm create vite@latest my-react-app -- --template react
```
- Create React App (CRA)（官方传统脚手架，适合初学者）：
```
npx create-react-app my-react-app
```

2. 项目结构

初始化后的目录建议按功能模块组织：

src/
  ├── components/     # 公共组件
  ├── pages/          # 页面组件
  ├── assets/         # 静态资源（图片、字体等）
  ├── hooks/          # 自定义 Hook
  ├── store/          # 状态管理（Redux/Zustand）
  ├── services/       # API 请求封装
  ├── utils/          # 工具函数
  ├── App.jsx         # 根组件
  └── main.jsx        # 入口文件

二、核心技术栈

1. React 核心库

React 18+：支持并发模式（Concurrent Mode）和 Hooks API。

React Router v6：处理路由：

npm install react-router-dom

基础配置示例：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

2. 状态管理

简单场景：使用 useState 或 Context API。

复杂场景：

Redux Toolkit（推荐）：

npm install @reduxjs/toolkit react-redux

示例 Store 配置：

// store/store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./features/counterSlice";

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Zustand（轻量级状态管理库，适合中小项目）。

3. 样式方案

CSS Modules：避免样式冲突。

/* Button.module.css */
.primary {
  background: blue;
}

import styles from "./Button.module.css";
<button className={styles.primary}>Click</button>

Tailwind CSS（实用类优先，快速开发）：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

CSS-in-JS：推荐 styled-components 或 Emotion。

4. HTTP 请求

Axios（推荐）：

npm install axios

封装示例：

import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});

  instance.interceptors.request.use(
(config) => {
  // 在发送请求之前做些什么
  return config;
},
(error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
}
  );

  instance.interceptors.response.use(
(response) => {
  // 对响应数据做点什么
  return response;
},
(error) => {
  // 对响应错误做点什么
  if (error.response) {
    console.error('Response error:', error.response.status);
  } else if (error.request) {
    console.error('No response received:', error.request);
  } else {
    console.error('Error setting up request:', error.message);
  }
  return Promise.reject(error);
}
  );
  export default instance;

5. 代码规范

ESLint + Prettier：

npm install -D eslint prettier eslint-config-prettier eslint-plugin-react

配置文件 .eslintrc.json：

{
  "extends": ["react-app", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

6. 测试工具

Jest + React Testing Library：

npm install -D jest @testing-library/react @testing-library/jest-dom

示例测试：

// components/Button.test.jsx
import { render, screen } from "@testing-library/react";
import Button from "./Button";

test("renders button", () => {
  render(<Button>Click</Button>);
  expect(screen.getByText("Click")).toBeInTheDocument();
});

三、进阶技术栈

1. TypeScript（可选）

使用 TypeScript 增强代码类型安全：

npm install -D typescript @types/react @types/react-dom

初始化 tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "react-jsx"
  }
}

2. UI 组件库

Ant Design（企业级后台系统）：
```
npm install antd @ant-design/icons
```
Material-UI (MUI)（遵循 Material Design）。

3. 数据请求优化

React Query（管理服务端状态）：

npm install @tanstack/react-query

示例：

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  );
}

四、构建与部署

1. 打包构建

Vite 或 CRA 均支持：
```
npm run build
```
生成静态文件位于 dist/ 或 build/ 目录。

2. 部署

静态托管平台：Vercel、Netlify（自动化 CI/CD）。

传统服务器：Nginx 配置：

server {
  listen 80;
  root /path/to/build;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

五、技术栈组合推荐

场景	技术选型
基础项目	React + Vite + React Router + CSS Modules + Axios
进阶项目	基础技术 + Redux Toolkit + Tailwind CSS + Jest
企业级项目	TypeScript + React Query + Ant Design/MUI + Docker部署