feat: add react-vant + Rsbuild demo (#124)

README.md

@@ -44,6 +44,7 @@ npm run dev
 │   └── base            Building mini-programs using Vant Weapp
 │
 ├── react-vant          # Examples related to React Vant
+│   └── rsbuild         Building applications using React Vant and Rsbuild
 │   └── modern-js       Building applications using React Vant, Modern.js, and Rspack
 │
 └── vant-cli            # Examples related to Vant Cli

README.zh-CN.md

@@ -44,6 +44,7 @@ npm run dev
 │   └── base            使用 Vant Weapp 搭建小程序
 │
 ├── react-vant          # React Vant 相关示例
+│   └── rsbuild         使用 React Vant 和 Rsbuild 搭建应用
 │   └── modern-js       使用 React Vant、Modern.js、Rspack 搭建应用
 │
 └── vant-cli            # Vant Cli 相关示例

react-vant/rsbuild/.gitignore

@@ -0,0 +1,13 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea

react-vant/rsbuild/README.md

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

react-vant/rsbuild/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "rsbuild-react-ts",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "@react-vant/icons": "^0.0.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-vant": "^3.2.5"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^0.0.25",
+    "@rsbuild/plugin-react": "^0.0.25",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5.2.2"
+  }
+}

react-vant/rsbuild/rsbuild.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+});

react-vant/rsbuild/src/App.scss

@@ -0,0 +1,49 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  background-color: #f8f8f8;
+  -webkit-font-smoothing: antialiased;
+}
+
+p {
+  margin: 0;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+.user {
+  &-poster {
+    width: 100%;
+    height: 53vw;
+    display: block;
+  }
+
+  &-group {
+    margin-bottom: 15px;
+  }
+
+  &-links {
+    padding: 15px 0;
+    font-size: 12px;
+    text-align: center;
+    background-color: #fff;
+
+    .rv-icon {
+      font-size: 24px;
+      margin-bottom: 4px;
+    }
+
+    .rv-flexitem {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}

react-vant/rsbuild/src/App.tsx

@@ -0,0 +1,54 @@
+import { Flex, CellGroup, Cell } from 'react-vant';
+import {
+  Records,
+  Tosend,
+  Logistics,
+  PendingPayment,
+  Points,
+  GoldCoinO,
+  GiftO,
+} from '@react-vant/icons';
+import './App.scss';
+
+const App = () => (
+  <div className="container-box">
+    <main>
+      <div>
+        <img
+          className="user-poster"
+          src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png"
+        />
+        <Flex className="user-links">
+          <Flex.Item span="6">
+            <PendingPayment />
+            待付款
+          </Flex.Item>
+          <Flex.Item span="6">
+            <Records />
+            待接单
+          </Flex.Item>
+          <Flex.Item span="6">
+            <Tosend />
+            待发货
+          </Flex.Item>
+          <Flex.Item span="6">
+            <Logistics />
+            已发货
+          </Flex.Item>
+        </Flex>
+
+        <CellGroup className="user-group">
+          <Cell icon={<Records />} title="全部订单" isLink />
+        </CellGroup>
+
+        <CellGroup>
+          <Cell icon={<Points />} title="我的积分" isLink />
+          <Cell icon={<GoldCoinO />} title="我的优惠券" isLink />
+          <Cell icon={<GiftO />} title="我收到的礼物" isLink />
+        </CellGroup>
+      </div>
+    </main>
+  </div>
+);
+
+export default App;

react-vant/rsbuild/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

react-vant/rsbuild/src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

react-vant/rsbuild/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"]
+}