# react-taro-one

**Repository Path**: ming34902/react-taro-one

## Basic Information

- **Project Name**: react-taro-one
- **Description**: react18+taro3.5+webpack
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-30
- **Last Updated**: 2026-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Taro Demo (React 18)

> 由 `Taro-demo-two`（**Taro v1 + React 16 + Redux + @tarojs/redux + redux-thunk**）改写的 **React 18 + Taro 3** 项目。

React 18 + Taro 3 + webpack + js

## 技术栈改动对照

| 能力 | 旧项目（React 16） | 本项目（React 18） |
| --- | --- | --- |
| 框架 | Taro 1.x | Taro 3.6（Webpack5 编译器） |
| React | React 16 | **React 18** |
| 运行时 | @tarojs/async-await | @tarojs/runtime + @tarojs/react |
| Redux 连接 | @tarojs/redux（connect/Provider，已废弃） | **react-redux v8**（`useSelector` / `useDispatch`） |
| Store | redux.createStore + compose | **@reduxjs/toolkit** `configureStore` |
| 组件写法 | class 组件 + 装饰器 | **函数组件 + Hooks**（useState/useEffect/useRef） |
| 命令式 ref | class 实例方法 | `forwardRef` + `useImperativeHandle` |
| 生命周期 | componentDidShow/Hide | Taro Hooks（useDidShow/useDidHide 等） |
| 配置 | `config` + 页面内 `config` 属性 | `app.config.js`（页面/tabBar/window） |

## 目录结构

```
src/
  app.js                  # 应用入口（Provider + Redux store）
  app.config.js           # 页面、tabBar、window 配置
  app.scss                # 全局样式
  assets/                 # 静态资源（与旧项目保持一致）
  actions/                # Redux action（dispatchLogin / dispatchBannerInfo）
  reducers/               # Redux reducer（login / home）
  store/index.js          # configureStore 配置
  api/                    # 网络请求封装（httpurl / request）
  utils/                  # 工具（datatool 尺寸适配 / style 样式 / redux helper）
  components/             # 通用组件（loading / my-modal / safe-area-view / text / touchable-button）
  pages/
    home/homepage.jsx            # 首页（banner / 政策解读 / 签到弹窗）
    home/home-search-top         # 首页搜索栏
    home/jifen-and-qiandao       # 积分商城 / 每日签到
    home/sign-alert              # 每日签到弹窗
    class/classpage.jsx          # 云学术（任务直通车列表）
    class/renwu-zhitong-item     # 任务直通卡片
    prefecture/prefecturepage.jsx # 专区
    mine/minepage.jsx            # 我的
    mine/minepage-list-item      # 我的页列表项
```

## 运行

```bash
# 安装依赖
npm install

# 微信小程序（开发，带 watch）
npm run dev:weapp

# H5（开发，带 watch）
npm run dev:h5

# 构建
npm run build:weapp
npm run build:h5
```

> 说明：
> - 请求地址在 `src/api/httpurl.js` 与 `config/dev.js`（可切换到内网 `http://127.0.0.1:3721` 或线上地址）。
> - 旧项目中的 `react-native-swiper-fix-viewpager`、`@tarojs/async-await`、`@tarojs/redux`、单页聚合 + 自定义 tabBar 方案，在本项目统一替换为 Taro 3 原生 `Swiper`、原生 `tabBar` 与官方 API，逻辑与 UI 保持一致。
> - 若需打印 Redux action 日志，可安装 `redux-logger` 并在 `src/store/index.js` 中启用。