feat(react): ✨ use NutUI-React Taro

- https://nutui.jd.com/taro/react/2x/#/zh-CN/guide/start-react
- https://docs.taro.zone/docs/use-h5
- jdf2e/nutui-icons#16

Author: anyesu

packages/taro-demo-react/babel.config.js

@@ -10,4 +10,16 @@ module.exports = {
       },
     ],
   ],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: '@nutui/nutui-react-taro',
+        libraryDirectory: 'dist/esm',
+        style: 'css',
+        camel2DashComponentName: false,
+      },
+      'nutui-react-taro',
+    ],
+  ],
 };

packages/taro-demo-react/config/index.ts

@@ -7,7 +7,7 @@ import prodConfig from './prod';
 export default defineConfig(async (merge) => {
   const baseConfig: UserConfigExport = {
     projectName: 'taro-demo-react',
-    designWidth: 750,
+    designWidth: 375, // 全局使用 NutUI 的 375 尺寸
     deviceRatio: {
       640: 2.34 / 2,
       750: 1,

packages/taro-demo-react/package.json

@@ -35,9 +35,12 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.24.4",
+    "@nutui/icons-react-taro": "1.0.4",
+    "@nutui/nutui-react-taro": "2.6.0",
     "@tarojs/components": "3.6.25",
     "@tarojs/helper": "3.6.25",
     "@tarojs/plugin-framework-react": "3.6.25",
+    "@tarojs/plugin-html": "3.6.25",
     "@tarojs/plugin-platform-alipay": "3.6.25",
     "@tarojs/plugin-platform-h5": "3.6.25",
     "@tarojs/plugin-platform-harmony-hybrid": "3.6.25",
@@ -64,6 +67,7 @@
     "@types/jest": "29.5.12",
     "@types/react": "18.2.74",
     "@types/webpack-env": "1.18.4",
+    "babel-plugin-import": "1.13.8",
     "babel-preset-taro": "3.6.25",
     "eslint-config-taro": "3.6.25",
     "eslint-plugin-import": "2.12.0",

packages/taro-demo-react/src/app.ts

@@ -1,5 +1,6 @@
 import { useLaunch } from '@tarojs/taro';
 import type { PropsWithChildren } from 'react';
+import '@nutui/nutui-react-taro/dist/style.css';
 import './app.scss';
 
 function App({ children }: PropsWithChildren<any>) {

packages/taro-demo-react/src/pages/index/constants.ts

@@ -7,4 +7,7 @@ export interface NavGroupConfig extends NavConfig {
   children: NavConfig[];
 }
 
+export const NUT_UI_LOGO =
+  'https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png';
+
 export const navs: NavGroupConfig[] = [];

packages/taro-demo-react/src/pages/index/index.module.scss

@@ -0,0 +1,40 @@
+.index {
+  height: 100%;
+  width: 100%;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    padding: 0 34px;
+    height: 117px;
+    > image {
+      width: 67px;
+      height: 67px;
+      margin-right: 18px;
+      flex-shrink: 0;
+    }
+    &__info {
+      display: flex;
+      flex-direction: column;
+      h1 {
+        height: 48px;
+        line-height: 48px;
+        font-size: 34px;
+        color: rgb(51 51 51 / 100%);
+        font-weight: 500;
+      }
+      p {
+        height: 18px;
+        line-height: 18px;
+        font-size: 12px;
+        color: rgb(154 155 157 / 100%);
+      }
+    }
+  }
+  &__navs {
+    background: #f7f8fa;
+    border-radius: 30px 30px 0 0;
+    overflow: hidden;
+    padding: 30px 25px;
+  }
+}

packages/taro-demo-react/src/pages/index/index.tsx

@@ -1,14 +1,34 @@
-import { Text, View } from '@tarojs/components';
-import { useLoad } from '@tarojs/taro';
+import { Image, View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { ArrowRight } from '@nutui/icons-react-taro';
+import { Cell, CellGroup } from '@nutui/nutui-react-taro';
+import { navs, NUT_UI_LOGO } from './constants';
+import styles from './index.module.scss';
 
-export default function Index() {
-  useLoad(() => {
-    console.log('Page loaded.');
-  });
+async function navigateTo(group: string, path: string) {
+  await Taro.navigateTo({ url: `/pages/${group}/${path}` });
+}
 
+export default function Index() {
   return (
-    <View className="index">
-      <Text>Hello world!</Text>
+    <View className={styles.index}>
+      <View className={styles.index__header}>
+        <Image src={NUT_UI_LOGO} />
+        <View className={styles.index__header__info}>
+          <h1>NutUI React</h1>
+          <p>京东风格的轻量级小程序组件库 React 版</p>
+        </View>
+      </View>
+      <View className={styles.index__navs}>
+        {navs.map((group) => (
+          <CellGroup key={group.path} title={group.name}>
+            {group.children.map(({ name, path }) => {
+              const onClick = () => navigateTo(group.path, path);
+              return <Cell key={path} title={name} extra={<ArrowRight />} onClick={onClick} />;
+            })}
+          </CellGroup>
+        ))}
+      </View>
     </View>
   );
 }