React实现掘金移动版，支持SSR和PWA

本项目是一个使用 React 开发的掘金移动版应用，大部分界面设计遵循了掘金的风格，但在某些细节上根据个人需求进行了调整。项目重点在于提升移动端用户体验，同时集成了服务端渲染（SSR）和渐进式网络应用（PWA）的支持。开发此项目的初衷是为了巩固近期学习的技术知识，同时也为了探索在实际项目中可能遇到的技术挑战及其解决方案。

运行环境配置

# 安装依赖
yarn 或 npm install

# 开发模式
npm run dev:client
npm run dev:server

# 生产模式
npm run build
npm start

技术栈

• React 及其核心库
• React Router 用于客户端和服务端路由管理
• React Helmet 用于动态设置网页标题和元信息
• React Loadable 实现按需加载组件
• Redux 和 Rematch 用于状态管理
• React Virtual List 处理大量列表项的高效渲染
• Axios 进行 HTTP 请求
• Immer 简化不可变数据更新操作
• Babel Polyfill 支持旧浏览器
• Lodash 提供实用的函数工具
• Webpack 构建工具
• Eslint 代码质量检查工具
• Express 服务器框架

功能特性

• 公共头部：
  • 用户登录功能
• 首页：
  • 文章点赞
  • 分类切换
• 文章详情页：
  • 评论列表展示与互动
  • 推荐文章展示
• 沸点页：展示热门话题
• 小册：提供精选内容合集
• 开源库：列出热门开源项目
• 活动页：展示社区活动
• 用户主页：
  • 关注/取关用户
  • 查看用户动态
  • 浏览用户专栏和沸点
  • 查看用户点赞记录
  • 关注的标签列表

上述功能覆盖了大多数用户交互场景，其中登录功能目前仅支持手机登录方式，或通过手动设置 COOKIE 来模拟登录状态。

const userInfo = {
    token: data.token,
    clientId: data.clientId,
    uid: data.user.uid
}
COOKIEs.set('userInfo', userInfo, { path: '/' })

项目架构

├─.gitattributes
├─ecosystem.json - PM2 部署配置文件
├─src
|  ├─app.jsx - 应用入口
|  ├─entry-client.js - 客户端入口
|  ├─entry-server.js - 服务端入口
|  ├─registerServiceWorker.js - 注册 PWA 服务工作线程
|  ├─utils - 工具函数目录
|  ├─store - Redux Store 配置
|  ├─routes - 路由配置
|  ├─models - Redux Model 文件
|  ├─containers - 页面级组件
|  ├─components - 基础组件
|  ├─assets - 静态资源
|  ├─api - API 封装及数据获取方法
├─server - 服务端渲染相关代码
├─public - 公共静态资源
├─build - Webpack 构建配置
|   ├─dll - 动态链接库配置
├─.vscode
|    └launch.json - VSCode 调试配置

以上即为该项目的主要内容和技术细节，希望能为您的学习和开发带来帮助。欢迎关注和支持我们的项目。