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

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

一個高仿的掘金，大部分是按照掘金的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.jsonpm2部署配置
├─src
|├─app.jsx
|├─entry-client.js
|├─entry-server.js
|├─registerServiceWorker.js
|├─utils工具函式
|├─storestore配置
|├─routes路由配置
|├─modelsstore的model檔案，建立state、reducers、effects
|├─containers頁面元件
|├─components展示元件
|├─assets需要webpack處理的資源
|├─api對請求庫的封裝及獲取資料的方法
├─server服務端渲染
├─public靜態資源
├─buildwebpack配置
|├─dll生成dll的配置
├─.vscode
|└launch.json
複製程式碼