Typescript3 + react16.7 + react-router4.3專案

一個適合練手的react專案

專案以及專案筆記會不斷更新

體會vue與react專案區別

宣告：本專案參考了滴滴大佬的vue專案，原vue專案請關注ustbhuangyi

專案執行

npm install

npm start

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

可以通過dts-gen為沒有types的npm包自動生成d.ts宣告檔案

專案筆記

D1

• 1、搭建專案
• 2、alias與tsconfig的配置

D2

• 1、Tab元件與路由
• 2、基於better-scroll的react輪播圖元件
• 3、http-proxy-middleware
• 4、create-react-app搭建代理（一）
• 5、create-react-app搭建代理（二）
• 6、scroll元件：移動端滾動
• 7、loading元件
• 8、圖片懶載入

D3

• 1、圖片懶載入元件優化
• 2、歌曲資訊頁&typescript的用法
• 3、滾動列表複用元件
• 4、非同步獲取資料&儲存元件狀態
• 5、除Link外控制路由跳轉：withRouter & typescript
• 6、redux使用方法

D4

• 1、withRouter&connect&typescript的使用
• 2、頁面切換與非同步資料請求bug
• 3、getDerivedStateFromProps使用技巧
• 4、基於react-transition-group的react過渡動畫
• 5、react-lodable元件動態匯入
• 6、react中輸入框防抖debounce

D5

• 1、typescript約束輸入資料結構編寫listView可複用元件
• 2、typescript在react專案中的實踐
• 3、typescript在react專案中的實踐之ref

部署

• 1、react專案本地部署到nginx

ToDo

• 完善專案中typescript型別
  • store，action型別
  • 資料型別
  • 無狀態元件 React.SFC
  • 有狀態元件 readonly state : Readonly<IState>，react已經對props、props的屬性與state的屬性作了只讀處理
  • react事件型別
  • ref型別 React.RefObject<Scroll> --> <Scroll ref={this.toplist}></Scroll>
  • 媒體事件型別 const { currentTime } : { currentTime: number } = e.target as HTMLMediaElement
• 專案本地部署
• create-react-app優化打包

頁面展示