前段时间几乎过了一遍React知识点，最近也试着在写Rust后端，后面打算结合两者写一个网站，让自己持续学习，在高强度CRUD中解放出来！多思考思考

前端技术栈我们主要选择Vite + React + Ts + SWC(我是前端小白，也不太懂)

接下来新建项目

npm create vite@latest

输入项目名称，选择Ts + SWC

然后回车

cd pro-name && npm i

npm run dev

整理项目结构

my-react-app/
├── public/
│   ├── index.html  # 应用的入口 HTML 文件
│   └── favicon.ico # 网站的图标文件
├── src/
│   ├── assets/
│   │   ├── images/  # 存放图片资源
│   │   └── styles/  # 存放全局样式文件
│   ├── components/  # 存放可复用的 React 组件
│   │   ├── Button/  # Button 组件
│   │   │   ├── Button.tsx          # Button 组件的 TypeScript 文件
│   │   │   ├── Button.module.css   # Button 组件的样式文件
│   │   │   └── Button.test.tsx     # Button 组件的测试文件
│   │   ├── Header/  # Header 组件
│   │   │   ├── Header.tsx          # Header 组件的 TypeScript 文件
│   │   │   ├── Header.module.css   # Header 组件的样式文件
│   │   │   └── Header.test.tsx     # Header 组件的测试文件
│   │   └── ...      # 其他组件
│   ├── hooks/       # 存放自定义 React Hooks
│   │   ├── useFetch.ts  # 自定义的 useFetch Hook
│   │   └── ...      # 其他 Hooks
│   ├── pages/       # 存放页面组件
│   │   ├── Home/    # Home 页面
│   │   │   ├── Home.tsx          # Home 页面的 TypeScript 文件
│   │   │   ├── Home.module.css   # Home 页面的样式文件
│   │   │   └── Home.test.tsx     # Home 页面的测试文件
│   │   ├── About/   # About 页面
│   │   │   ├── About.tsx         # About 页面的 TypeScript 文件
│   │   │   ├── About.module.css  # About 页面的样式文件
│   │   │   └── About.test.tsx    # About 页面的测试文件
│   │   └── ...      # 其他页面
│   ├── services/    # 存放与后端交互的服务文件
│   │   ├── api.ts   # 封装了 API 请求的文件
│   │   └── ...      # 其他服务文件
│   ├── store/       # 存放状态管理相关的文件（如 Redux）
│   │   ├── actions/ # 存放 Redux 的 action creators
│   │   ├── reducers/ # 存放 Redux 的 reducers
│   │   ├── selectors/ # 存放 Redux 的 selectors
│   │   ├── store.ts # 配置 Redux store
│   │   └── ...      # 其他状态管理文件
│   ├── types/       # 存放 TypeScript 类型定义文件
│   │   ├── index.ts # 导出所有类型定义
│   │   └── ...      # 其他类型定义文件
│   ├── utils/       # 存放工具函数和辅助函数
│   │   ├── helpers.ts # 存放通用的工具函数
│   │   └── ...      # 其他工具函数
│   ├── App.tsx      # 应用的主组件
│   ├── index.tsx    # 应用的入口文件
│   └── react-app-env.d.ts # TypeScript 的类型声明文件
├── .env             # 存放环境变量
├── .gitignore       # 配置 Git 忽略的文件和目录
├── package.json     # 项目的依赖和脚本配置
├── tsconfig.json    # TypeScript 的配置文件
├── vite.config.ts   # Vite 的配置文件
└── README.md        # 项目的说明文档