# react-jike-mobile

**Repository Path**: gfh_he/react-jike-mobile

## Basic Information

- **Project Name**: react-jike-mobile
- **Description**: 极客园移动端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-22
- **Last Updated**: 2025-09-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 极客园移动端项目

## 项目介绍

极客园移动端是一个基于 React 技术栈开发的移动端资讯应用，为用户提供技术文章阅读服务。项目采用现代前端开发技术和最佳实践，实现了文章列表浏览、文章详情阅读等核心功能。

## 技术栈

- **前端框架**：React 19
- **构建工具**：Vite 7
- **开发语言**：TypeScript 5.8
- **UI 组件库**：Antd Mobile
- **状态管理**：React Context API / Redux (可选)
- **路由管理**：React Router
- **HTTP 请求**：Axios
- **代码规范**：ESLint + TypeScript ESLint

## 项目结构

```
react-jike-mobile/
├── public/                 # 静态资源目录
├── src/                    # 源代码目录
│   ├── api/                # API 接口定义
│   ├── assets/             # 项目资源文件(图片、字体等)
│   ├── components/         # 公共组件
│   ├── hooks/              # 自定义 Hooks
│   ├── pages/              # 页面组件
│   │   ├── article/        # 文章相关页面
│   │   │   ├── list/       # 文章列表页
│   │   │   └── detail/     # 文章详情页
│   │   └── ...             # 其他页面
│   ├── router/             # 路由配置
│   ├── store/              # 状态管理
│   ├── styles/             # 全局样式
│   ├── types/              # TypeScript 类型定义
│   ├── utils/              # 工具函数
│   ├── App.tsx             # 应用入口组件
│   ├── main.tsx            # 应用入口文件
│   └── vite-env.d.ts       # Vite 环境类型声明
├── .gitignore              # Git 忽略文件
├── eslint.config.js        # ESLint 配置
├── index.html              # HTML 模板
├── package.json            # 项目依赖配置
├── tsconfig.json           # TypeScript 配置
├── tsconfig.app.json       # 应用 TypeScript 配置
├── tsconfig.node.json      # Node 环境 TypeScript 配置
└── vite.config.ts          # Vite 配置文件
```

## 功能模块

### 1. 文章列表模块

文章列表模块展示技术文章的摘要信息，支持以下功能：

- 文章列表展示，包含标题、摘要、作者、发布时间、阅读量等信息
- 下拉刷新获取最新文章
- 上拉加载更多文章
- 文章分类筛选
- 热门文章推荐

**技术实现要点**：
- 使用 Antd Mobile 的 `PullToRefresh` 组件实现下拉刷新
- 使用 `InfiniteScroll` 组件实现无限滚动加载
- 使用 `Tabs` 组件实现分类切换
- 使用 `List` 组件展示文章列表

### 2. 文章详情模块

文章详情模块展示完整的文章内容，支持以下功能：

- 文章内容展示，包含标题、作者、发布时间、正文等
- 文章内容富文本渲染
- 代码块语法高亮
- 图片查看器
- 文章分享功能
- 相关文章推荐

**技术实现要点**：
- 使用 Markdown 解析库（如 `react-markdown`）处理富文本内容
- 使用 `prismjs` 或 `highlight.js` 实现代码高亮
- 使用 Antd Mobile 的 `ImageViewer` 组件实现图片预览
- 使用 `NavBar` 组件实现顶部导航

## 开发环境搭建

### 前置要求

- Node.js 18.0+ 
- npm 9.0+ 或 yarn 1.22+

### 安装依赖

```bash
# 使用 npm
npm install

# 使用 yarn
yarn
```

### 启动开发服务器

```bash
# 使用 npm
npm run dev

# 使用 yarn
yarn dev
```

### 构建生产版本

```bash
# 使用 npm
npm run build

# 使用 yarn
yarn build
```

## 项目配置

### 添加 Antd Mobile

```bash
npm install antd-mobile
```

在 `main.tsx` 中导入 Antd Mobile 样式：

```tsx
import 'antd-mobile/es/global'
```

### 配置路由

```bash
npm install react-router-dom
```

### 配置 HTTP 请求

```bash
npm install axios
```

## 开发规范

### 命名规范

- 组件文件使用 PascalCase 命名（如 `ArticleList.tsx`）
- 非组件文件使用 camelCase 命名（如 `httpRequest.ts`）
- CSS 模块文件使用与组件相同的名称，后缀为 `.module.css`（如 `ArticleList.module.css`）
- 常量使用全大写下划线命名（如 `MAX_ARTICLE_COUNT`）

### 代码风格

- 使用函数组件和 Hooks 而非类组件
- 使用 TypeScript 类型定义，避免使用 `any` 类型
- 遵循 ESLint 规则进行代码格式化

## 部署指南

项目构建后生成的静态文件位于 `dist` 目录，可以部署到任何静态文件服务器上。

### Nginx 配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;

    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

## 后续开发计划

1. 添加用户认证模块
2. 实现文章评论功能
3. 添加个人中心页面
4. 优化应用性能和用户体验
5. 添加离线阅读功能

## 贡献指南

1. Fork 项目仓库
2. 创建功能分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 创建 Pull Request

## 许可证

[MIT](LICENSE)