创建项目

npx create-react-app react-app

然后进入到项目目录， 安装 RSBuild

pnpm install @rsbuild/core @rsbuild/plugin-react --save-dev

安装 RSBuild 的核心模块以及 React 插件

在项目根目录下创建一个 rsbuild.config.js 文件。这是 RSBuild 的配置文件。

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
  dev: {
    client: {
      port: '',
    },
  },
});

删除无用的文件， 只保留最基础的

补充

---

安装依赖

通用插件

首先是项目中必须要用到的几个插件

pnpm add react-router-dom axios @reduxjs/toolkit react-redux --save

组件库

pnpm add antd-mobile

处理sass

npm install @rsbuild/plugin-sass --save-dev

在你的 RSBuild 配置文件中，通常是 rsbuild.config.js，添加 @rsbuild/plugin-sass 到 plugins 数组中

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
  plugins: [pluginReact(), pluginSass()],
  dev: {
    client: {
      port: '',
    },
  },
});

全部安装完成后的内容

{
  "name": "account-book-web",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.2.7",
    "antd-mobile": "^5.37.1",
    "axios": "^1.7.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.26.0"
  },
  "devDependencies": {
    "@rsbuild/core": "^0.7.3",
    "@rsbuild/plugin-react": "^0.7.3",
    "@rsbuild/plugin-sass": "1.0.1-beta.13",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "typescript": "^5.4.2"
  }
}

调整结构

项目中各个功能一般都有单独的文件夹来做响应的事儿， 所以首先需要做的就是创建出对应的文件夹， 以及核心的几个页面

结构

├── README.md
├── package.json
├── pnpm-lock.yaml
├── rsbuild.config.ts
├── src
|  ├── App.css
|  ├── App.tsx
|  ├── api
|  |  ├── api.ts
|  |  └── index.ts
|  ├── env.d.ts
|  ├── index.tsx
|  ├── pages
|  |  ├── addRecord
|  |  |  └── index.tsx
|  |  ├── home
|  |  |  └── index.tsx
|  |  ├── recordList
|  |  |  ├── month.tsx
|  |  |  └── year.tsx
|  |  ├── register
|  |  |  └── Register.tsx
|  |  └── signin
|  |     └── index.tsx
|  ├── router
|  |  └── index.tsx
|  └── store
|     ├── index.ts
|     └── modules
|        └── recordList.ts
└── tsconfig.json

此时项目的结构应该是如此。

文件说明

├── README.md：在根目录下有一个名为README.md的文件。
├── node_modules：这是一个文件夹，通常包含项目的依赖库。
| ├── @reduxjs：在node_modules文件夹内，有一个名为@reduxjs的子文件夹，可能是Redux状态管理库的一部分。
| ├── @rsbuild：@rsbuild 文件夹，可能是一个与项目构建相关的库或工具。
| ├── @types：@types 文件夹，通常包含 TypeScript 类型定义文件，用于提供库的类型信息。
├── out.txt：根目录下的另一个文件。
├── package.json：项目的配置文件，包含项目的元数据和依赖信息。
├── pnpm-lock.yaml：如果项目使用pnpm包管理器，这个文件会锁定依赖的具体版本。
├── rsbuild.config.ts：一个配置文件，可能是rsbuild工具的配置文件。
├── src：这是存放项目源代码的文件夹。
| ├── App.css：在src目录下，有一个App.css文件，可能是应用的样式文件。
| ├── App.tsx：App.tsx文件，可能是 React 组件文件。
| ├── api：api文件夹，可能包含与后端服务交互的接口文件。
| | ├── api.ts：一个api.ts文件，可能包含 API 请求的逻辑。
| | └── index.ts：index.ts文件，可能是api文件夹的入口文件。
| ├── env.d.ts：环境声明文件，用于声明开发环境所需的类型和模块。
| ├── index.tsx：入口文件，可能是 React 应用的根组件。
| ├── pages：页面文件夹，可能包含应用的不同页面组件。
| | ├── addRecord：addRecord页面，可能包含添加记录的组件。
| | | └── index.tsx：addRecord页面的入口文件。
| | ├── home：home页面，可能包含主页面的组件。
| | | └── index.tsx：home页面的入口文件。
| | ├── recordList：recordList页面，可能包含记录列表的组件。
| | | ├── month.tsx：处理按月份显示记录列表的组件。
| | | └── year.tsx：处理按年份显示记录列表的组件。
| | ├── register：register页面，可能用于用户注册。
| | | └── Register.tsx：register页面的组件。
| | └── signin：signin页面，可能用于用户登录。
| | └── index.tsx：signin页面的入口文件。
| ├── router：router文件夹，可能包含应用的路由配置。
| | └── index.tsx：router文件夹的入口文件。
| └── store：store文件夹，可能用于管理应用的状态。
| ├── index.ts：创建 store 的文件。
| └── modules：管理应用状态的模块文件。
| └── recordList.ts：recordList模块，可能用于管理记录列表的状态。
└── tsconfig.json：TypeScript 的配置文件。

router

结合前面的学习以及上面创建的页面， 来拉一下路由列表

import { createBrowserRouter } from 'react-router-dom'
import Register from '../pages/register/Register'
import Signin from '../pages/signin'
import Home from '../pages/home'
import AddRecord from '../pages/addRecord'
import RecordListYear from '../pages/recordList/year'
import RecordListMonth from '../pages/recordList/month'

const router = createBrowserRouter([
    {
        path: '/',
        element: <Home />
    },
    {
        path: '/sign-in',
        element: <Signin />
    },
    {
        path: '/register',
        element: <Register />
    },
    {
        path: '/add-record',
        element: <AddRecord />
    },
    {
        path: '/recodr-list',
        children: [
            {
                path: 'year',
                element: <RecordListYear />
            },
            {
                path: 'month',
                element: <RecordListMonth />
            },
        ]
    }
])

export default router

在app.tsx中引入路由

import './App.css';
import { RouterProvider } from 'react-router-dom'
import router from './router';

const App = () => {
  return (
    <div className="content">
     <RouterProvider router={router} />
    </div>
  );
};

export default App;

此时启动项目， 路由已经能正常工作了