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

Kim09AI發表於2018-11-01

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
複製程式碼