react高仿掘金移動版，支持服務端渲染

react-juejin

一個高仿的掘金，大部分是按照掘金的ui來實現的，個別地方就根據本身想法修修改改，只作了移動端的部分，還作pc的部分就要花太多時間了，支持服務端渲染、pwa等，寫這個項目主要是對近幾個月所學的技術作個實踐，看看有哪裏還有不足，以及在實際開發的時候會踩到哪些坑，該怎麼解決

運行

yarn or npm install

# development
npm run dev:client
npm run dev:server

# production
npm run build
npm start
複製代碼

技術棧

• react
• react-dom
• react-router-dom
• react-helmet （設置title及meta）
• react-loadable
• react-redux
• redux-connect （異步路由跳轉）
• react-router-config
• react-virtual-list （長列表渲染）
• prop-types
• @rematch/core （rematch 一個更好用的redux）
• @rematch/loading （調用effects時，自動設置loading）
• immer （以帶反作用的方式修改數據並返回新引用的數據，不會影響原始數據）
• axios
• babel-polyfill
• classnames
• lodash-es
• react-swipe
• react-toastify
• react-content-loader （內容佔位的loading）
• react-lazyload
• react-swipe
• swipe-js-is
• husky （husky註冊git hook）
• lint-staged （對被提交的文件依次執行寫好的任務）
• 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
|  ├─utils      工具函數
|  ├─store      store配置
|  ├─routes     路由配置
|  ├─models     store的model文件，建立state、reducers、effects
|  ├─containers     頁面組件
|  ├─components     展現組件
|  ├─assets     須要webpack處理的資源
|  ├─api      對請求庫的封裝及獲取數據的方法
├─server    服務端渲染
├─public    靜態資源
├─build     webpack配置
|   ├─dll   生成dll的配置
├─.vscode
|    └launch.json
複製代碼

預覽

首頁

文章頁

沸點

小冊

開源庫

活動

用戶頁

最後

要是感興趣的話，能夠自行看代碼，大部份內容仍是比較簡單的，有問題的話歡迎提出了一塊兒討論

項目地址 線上地址