从零开始创建一个react项目完整实践（非常全面，建议收藏）

---

~总体概览

一、准备工作

1. 安装 Node.js 和 npm/yarn

   • Node.js 下载地址：https://nodejs.org/

   • 安装后确认版本：

     node -v
     npm -v
     

2. 安装包管理器（可选）

   • 推荐使用 yarn 或 pnpm（相比 npm 更快、依赖更干净）：

     npm install -g yarn
     

---

⚙️ 二、创建 React 项目

方式 1：使用 Vite（现代推荐 ✅）

npm create vite@latest my-app -- --template react
cd my-app
npm install

方式 2：使用 Create React App（老项目常见）

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

---

三、初始化开发环境

1. 安装项目依赖

   • 包括 UI 框架、路由、状态管理等：

     npm install react-router-dom zustand axios classnames
     

2. 安装开发辅助工具

   • ESLint + Prettier + Husky + Lint-staged（代码规范与自动化）
   • Tailwind CSS（或其他 UI 库）

   npm install -D eslint prettier husky lint-staged
   

3. 配置目录结构（建议）

   ├── public/             # 静态资源
   ├── src/
   │   ├── assets/         # 图片、字体等资源
   │   ├── components/     # 可复用组件
   │   ├── pages/          # 页面级组件
   │   ├── hooks/          # 自定义 hook
   │   ├── stores/         # 状态管理
   │   ├── utils/          # 工具函数
   │   ├── App.tsx         # 根组件
   │   └── main.tsx        # 入口文件
   ├── .eslintrc           # ESLint 配置
   ├── .prettierrc         # Prettier 配置
   └── package.json
   

---

四、开发与调试

1. 运行项目

   npm run dev   # vite
   # or
   npm start     # CRA
   

2. 热更新调试

   • 使用浏览器 DevTools + React Developer Tools 插件

3. API 代理 & 环境变量配置

   • .env, .env.local 支持自定义变量，如：

     VITE_API_BASE=https://api.example.com
     

---

五、构建与部署

1. 构建生产包

   npm run build
   

2. 部署到平台

   • Netlify、Vercel、GitHub Pages、阿里云、腾讯云等

   • 或使用 serve 工具本地部署：

     npm install -g serve
     serve -s dist
     

---

✅ 六、可选增强（进阶）

• 引入 TypeScript (--template react-ts)
• 使用 Redux Toolkit / Zustand / Recoil 管理状态
• 引入 i18n 支持多语言
• 使用 Cypress / Jest 进行测试
• 模块化 CSS（CSS Modules / Tailwind）
• 接入 Storybook 做组件文档

---

非常好，完成了初始化开发环境后，React 项目的代码开发也有明确的推荐顺序。下面是结合实际工程经验整理的一套标准化流程（适用于中小型到中大型项目），你可以直接作为开发参考：

---

一、代码开发顺序（推荐流程）

1️⃣ 规划路由结构（App 架构入口）

• 在 src/pages/ 中创建页面骨架（如 Home.tsx、Login.tsx）

• 在 src/App.tsx 中配置路由：

  import { BrowserRouter, Routes, Route } from "react-router-dom";
  import Home from "./pages/Home";
  import Login from "./pages/Login";
  
  function App() {
    return (
      
        
          } />
          } />
        
      
    );
  }
  
  export default App;
  

---

2️⃣ 搭建页面框架（Layout & 全局 UI）

• 在 src/layouts/ 中创建布局组件，如 MainLayout.tsx
• 放置 Header、Sidebar、Footer 等复用区域
• 确定页面间切换逻辑、权限校验（如登录验证跳转）

---

3️⃣ 搭建组件体系（UI 组件）

• 在 src/components/ 中逐步开发：

  • 原子组件：Button、Input、Avatar
  • 复合组件：Form、Card、Modal、Table

• 引入 UI 框架（如 Ant Design、Tailwind UI、ShadCN）

---

4️⃣ 状态管理（Zustand / Redux 等）

• 在 src/stores/ 中定义全局状态模块

  • 用户信息 store
  • 登录状态、主题色、语言设置等 store

  // userStore.ts
  import { create } from 'zustand';
  
  const useUserStore = create(set => ({
    user: null,
    setUser: (user) => set({ user }),
  }));
  

---

5️⃣ 封装 API 请求模块

• 在 src/api/ 中封装：

  • 使用 axios 创建全局实例
  • 定义 API 请求方法（如 login(), getUserInfo()）

  // api/instance.ts
  import axios from 'axios';
  
  export const request = axios.create({
    baseURL: import.meta.env.VITE_API_BASE,
    timeout: 10000,
  });
  

---

6️⃣ 开发业务逻辑页面（以页面为中心组织组件+API）

• 每个页面：

  • 组织页面布局 + 调用 API + 使用组件
  • 接入状态管理
  • 提取重复逻辑为自定义 Hook（在 src/hooks/ 中）

• 页面模块推荐结构（page 下结构）：

  pages/
    Dashboard/
      index.tsx
      components/    # 页面局部组件
      hooks/         # 页面独有逻辑
      api.ts         # 页面 API
  

---

7️⃣ 接入权限系统（如需要）

• 基于登录状态判断是否跳转
• 使用 重定向未登录用户
• 支持路由级别权限（如管理员页面）

---

8️⃣ 多环境支持 & .env 管理

• .env.development、.env.production 等
• 使用 import.meta.env.VITE_XXX 注入变量

---

9️⃣ 提高用户体验（可选）

• 引入 Toast / Message 通知系统
• 加载态、空态处理
• 骨架屏、错误边界（Error Boundary）

---

十、调试 & 测试 & 提交

• 使用 ESLint / Prettier 格式化代码
• 单元测试（Jest）、集成测试（Cypress）
• 提交前运行 lint-staged & husky
• Git 分支规范：feature/login-page, fix/bug-123

---

✅ 示例开发顺序小结（精简版）

步骤	内容	文件/目录示例
1	设置路由结构	App.tsx, pages/Home.tsx
2	建立页面布局（Layout）	layouts/MainLayout.tsx
3	编写组件库（可复用）	components/Button.tsx
4	引入状态管理	stores/userStore.ts
5	封装请求模块（axios）	api/request.ts
6	编写业务页面	pages/Dashboard/index.tsx
7	接入权限控制	routes/PrivateRoute.tsx
8	环境变量配置	.env.*
9	体验优化：加载态、空态等	components/Loading.tsx
10	测试、提交、部署	tests/, build/

---

Vite + React + TypeScript 项目模板

• ✅ 基础项目结构
• ✅ 路由配置（React Router v6）
• ✅ Zustand 状态管理（用户状态示例）
• ✅ Axios 请求封装
• ✅ 一个简单的页面（Dashboard）和一个组件（HelloBox）

---

️ 项目目录结构

my-app/
├── public/
├── src/
│   ├── api/                 # axios 封装 & API 方法
│   │   ├── request.ts
│   │   └── user.ts
│   ├── components/          # 通用组件
│   │   └── HelloBox.tsx
│   ├── layouts/             # 页面布局
│   │   └── MainLayout.tsx
│   ├── pages/               # 页面组件
│   │   └── Dashboard/
│   │       └── index.tsx
│   ├── stores/              # Zustand 状态管理
│   │   └── userStore.ts
│   ├── App.tsx              # 路由配置
│   ├── main.tsx             # 入口文件
│   └── vite-env.d.ts
├── .env                    # 环境变量
├── index.html
├── package.json
└── vite.config.ts

---

初始化命令

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

# 安装依赖
npm install react-router-dom axios zustand

# 启动项目
npm run dev

---

关键代码示例

src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  
    
  
);

---

src/App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import MainLayout from './layouts/MainLayout';

function App() {
  return (
    
      
        }>
          } />
        
      
    
  );
}

export default App;

---

src/layouts/MainLayout.tsx

import { Outlet } from 'react-router-dom';

const MainLayout = () => {
  return (
    

      
My App Header
      

        
      
    
  );
};

export default MainLayout;

---

src/pages/Dashboard/index.tsx

import HelloBox from '../../components/HelloBox';
import { useUserStore } from '../../stores/userStore';

export default function Dashboard() {
  const user = useUserStore((state) => state.user);
  return (
    

      
Dashboard
      
      
Current user: {user?.name || 'Guest'}
    
  );
}

---

src/components/HelloBox.tsx

const HelloBox = () => {
  return (
    

       Hello from Component!
    
  );
};

export default HelloBox;

---

src/stores/userStore.ts

import { create } from 'zustand';

interface User {
  name: string;
  email: string;
}

interface UserState {
  user: User | null;
  setUser: (user: User) => void;
}

export const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

---

src/api/request.ts

import axios from 'axios';

export const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE || 'https://api.example.com',
  timeout: 5000,
});

// 添加拦截器可选
request.interceptors.response.use(
  (res) => res.data,
  (err) => Promise.reject(err)
);

---

src/api/user.ts

import { request } from './request';

export const getUserInfo = () => {
  return request.get('/user/info');
};

---

.env

VITE_API_BASE=https://api.example.com

---

✅ 下一步开发：

• 在 stores/userStore.ts 添加登录逻辑
• 将 getUserInfo() 接入 Dashboard 页面
• 增加 /login 页面，配置权限拦截
• 加入组件库（如 Ant Design、TailwindCSS）

---