React+TypeScript + Redux 仿製網易雲-- [起手式]

學習了將近半個月的React全家桶,興致勃勃的擼一個仿網易雲, 手寫發下地址連接 仿網易雲 go >>  廢話很少說,流量若是不夠,請使用wifi查看~css

1. 使用的React及周邊

1.  react             
2.  TypeScript 
3.  redux
4.  react-redux
5.  redux-actions
6.  react-router-dom
7.  react-router
8.  react-router-redux
9.  scss 
10. http-proxy-middleware複製代碼

2. 文件夾分類

Vueer出身, 因此爲了方便, 儘可能寫成了和Vue同樣的格式, 以下:
    |
    |-- src          ==> 根目錄
    |    ┕component  ==> 通用組件目錄
    |    ┕pages      ==> 路由文件路徑
    |    ┕redux      ==> redux 配置文件
    |    ┕static     ==> 靜態文件目錄
    |    ┕utils      ==> 通用工具類/方法
複製代碼

3.目前已經實現

1.首頁ui基本完成, 剩餘音樂跳轉和播放
2.自定義播放器
3.分頁
4.路由配置
5.拖拽登陸框
6.自定義toast
7.通用工具類EventBus
持續更新中...複製代碼

4.Gif圖警告



5. React v16.8

項目React hook 覆蓋率95%, 不用不知道, 一用嚇一跳, 不得不說, 真香~

RFC 對比 RCC 優點 :
                   1. 簡潔, 代碼量明顯減小
                   2. 有狀態無狀態組件隨意切換
                   3. 更加容易上手
                   4. 與以往API對比明顯簡潔不少複製代碼

6.項目前期預覽圖





7. 結語

下一篇開始,會從0開始搭建一個React+TypeScript項目,固然是用create-react-app了~react

相關文章
相關標籤/搜索