Typescript3 + react16.7 + react-router4.3 + koa2 + mysql項目

一個適合練手的react項目

項目以及項目筆記會不斷更新

體會vue與react項目區別

聲明：本項目參考了滴滴大佬的vue項目，原vue項目請關注ustbhuangyi

項目運行

前端項目啓動

npm install

npm start

項目中用到的一些自定義types在common/js/typings目錄下

能夠經過dts-gen爲沒有types的npm包自動生成d.ts聲明文件

後端項目啓動

安裝mysql

啓動mysql服務:net start <mysql程序名稱>

登陸用戶: mysql -uroot -p

輸入密碼

建立數據庫：CREATE DATABASE music;

利用server/sql/music.sql中的查詢語句建立數據表user

啓動一個終端，切換到server文件夾下

npm install

npm start

項目筆記

D1

• 一、搭建項目
• 二、alias與tsconfig的配置

D2

• 一、Tab組件與路由
• 二、基於better-scroll的react輪播圖組件
• 三、http-proxy-middleware
• 四、create-react-app搭建代理（一）
• 五、create-react-app搭建代理（二）
• 六、scroll組件：移動端滾動
• 七、loading組件
• 八、圖片懶加載

D3

• 一、圖片懶加載組件優化
• 二、歌曲信息頁&typescript的用法
• 三、滾動列表複用組件
• 四、異步獲取數據&保存組件狀態
• 五、除Link外控制路由跳轉：withRouter & typescript
• 六、redux使用方法

D4

• 一、withRouter&connect&typescript的使用
• 二、頁面切換與異步數據請求bug
• 三、getDerivedStateFromProps使用技巧
• 四、基於react-transition-group的react過渡動畫
• 五、react-lodable組件動態導入
• 六、react中輸入框防抖debounce

D5

• 一、typescript約束輸入數據結構編寫listView可複用組件
• 二、typescript在react項目中的實踐
• 三、typescript在react項目中的實踐之ref

D6

• 一、webpack之splitChunks提高打包編譯速度
• 二、webpack之happypack多線程打包

部署

• 一、react項目本地部署到nginx

node後端

• 一、後端項目結構

ToDo

• [x] 完善項目中typescript類型

  • [x] store，action類型
  • [x] 數據類型
  • [x] 無狀態組件 React.SFC
  • [x] 有狀態組件
    readonly state : Readonly<IState>，react已經對props、props的屬性與state的屬性做了只讀處理
  • [x] react事件類型
  • [x] ref類型 React.RefObject<Scroll> --> <Scroll ref={this.toplist}></Scroll>
  • [x] 媒體事件類型 const { currentTime } : { currentTime: number } = e.target as HTMLMediaElement
• [x] 項目本地部署
• [ ] 組件優化
• [ ] create-react-app優化打包
• [ ] electron構建exe

• [ ] 我的中心管理系統

  • [x] mysql數據庫表的設計
  • [x] 登陸註冊
  • [x] koa2-cors解決跨域
  • [x] koa-bodyparser解決post數據的解析與提取
  • [x] 後端API功能實現、postman測試、前端測試:getDataByPage, addFavorite, deleteFavorite
  • [ ] cookie
  • [ ] session

頁面展現