# ReactDemo1

**Repository Path**: aqiubeats/react-demo1

## Basic Information

- **Project Name**: ReactDemo1
- **Description**: React App演示,用于React+And Design Mobile实践
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-18
- **Last Updated**: 2025-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README

# React 文章管理 项目文档

## 测试账号
- 手机号：13000000086
- 验证码：246810

## 项目演示

![演示视频](imgShow/show.gif)

![login](imgShow/login.png)
![add](imgShow/add.png)
![list](imgShow/list.png)
![detail](imgShow/detail.png)
![mine](imgShow/mine.png)


## 1. 项目目录结构
```
my-react-app-show/
├── .gitignore
├── eslint.config.js
├── index.html
├── jsconfig.json
├── package-lock.json
├── package.json
├── README.md
├── vite.config.js
├── public/
│   └── vite.svg
└── src/
    ├── App.css
    ├── App.jsx
    ├── error-boundary.jsx
    ├── index.scss
    ├── main.jsx
    ├── theme.css
    ├── apis/
    │   ├── article.js
    │   └── user.js
    ├── assets/
    │   ├── NoAvatar.png
    │   └── react.svg
    ├── components/
    │   ├── LimitCount.jsx
    │   ├── LoginPage.jsx
    │   ├── LoginPage.module.scss
    │   ├── PageNotFound.jsx
    │   ├── PageNotFound.module.scss
    │   └── ProtectedRoute.jsx
    ├── context/
    │   ├── NestedRouteContext.jsx
    │   └── UserContext.jsx
    ├── hooks/
    │   └── useChannel.js
    ├── layouts/
    │   ├── MainLayout.jsx
    │   └── MainLayout.module.scss
    ├── pages/
    │   ├── Charts/
    │   │   ├── Charts.jsx
    │   │   ├── Charts.module.scss
    │   │   └── Detail/
    │   │       ├── Detail.jsx
    │   │       └── Detail.module.scss
    │   ├── HomePage/
    │   │   ├── HomePage.jsx
    │   │   └── HomePage.module.scss
    │   └── Mine/
    │       ├── Mine.jsx
    │       └── Mine.module.scss
    ├── router/
    ├── store/
    │   ├── index.js
    │   └── modules/
    │       └── user.js
    └── utils/
        ├── index.js
        ├── request.js
        └── token.js
```

## 2. src目录介绍

### 2.1 apis/
- article.js: 文章相关API接口
- user.js: 用户相关API接口

### 2.2 assets/
- NoAvatar.png: 默认NoPic图片
- react.svg: React logo

### 2.3 components/
- LimitCount.jsx: 图片上传组件
- LoginPage.jsx: 登录页面组件
- PageNotFound.jsx: 404页面组件
- ProtectedRoute.jsx: 受保护路由组件

### 2.4 context/
- NestedRouteContext.jsx: 嵌套路由上下文
- UserContext.jsx: 全局上下文数据引用

### 2.5 hooks/
- useChannel.js: 频道相关自定义Hook

### 2.6 layouts/
- MainLayout.jsx: 主布局组件
- MainLayout.module.scss: 主布局样式

### 2.7 pages/
- Charts/: 文章列表相关页面
  - Charts.jsx: 文章列表主页面
  - Detail/: 文章详情页面
    - Detail.jsx: 文章详情组件
- HomePage/: 主页新增文章
  - HomePage.jsx: 主页新增文章组件
- Mine/: 我的页面
  - Mine.jsx: 我的页面组件

### 2.8 store/
- index.js: Redux store配置
- modules/: Redux模块
  - user.js: 用户相关状态管理

### 2.9 utils/
- index.js: 工具函数
- request.js: 请求封装
- token.js: token管理

## 3. 主要JSX文件使用的React知识点

### 3.1 MainLayout.jsx
- React Router的Outlet组件实现嵌套路由
- useState和useEffect进行状态管理
- useNavigate和useLocation进行路由导航和位置获取
- Context API的useUserContext和useNestedRouteContext
- antd-mobile组件库的NavBar和TabBar组件

### 3.2 HomePage.jsx
- React Hooks：useState, useRef, useMemo
- antd-mobile组件库的Form, Input, Button, Picker, Radio, Toast组件
- React Router的useSearchParams
- 自定义Hook useChannel
- ReactQuill富文本编辑器
- 自定义组件LimitCount(图片上传)

### 3.3 Charts.jsx
- React Hooks：useState, useEffect, useCallback, memo
- antd-mobile组件库的PullToRefresh, InfiniteScroll, Card, Tag组件(列表的下拉刷新和上拉加载)
- React Router的useNavigate
- 自定义组件ArticleCard
- CSS Modules进行样式管理

### 3.4 NestedRouteContext.jsx
- React Context API创建上下文
- React Hooks：useState, useEffect, useCallback, useContext
- React Router的useLocation
- 路由状态管理功能，包括保存、恢复和清理路由状态